基于连续延伸的角度2/4显示图像

Question

您好，我有以下代码来显示图像。

<div  *ngFor="let image of images" >
   <span *ngIf="    ">  //if img=t.jpg display this line
  <label>JPEG Image</label><img src='{{image.img}}'/>
   </span>
      <span *ngIf="    "> // if img=t.jpg dont display this line
  <label>PNG Image</label><img src='{{image.img}}'/>
   </span>
</div>

我想提出的条件是，如果图像扩展名是 .jpg 即 image.jpg 我希望显示 JPEG 行，如果它是 .png 即 image.png 我希望显示 PNG 图像行。请告诉我如何读取 *ngIf 中图像/文件的扩展名谢谢

Answer 1

这是示例代码，请检查

StackBitz 网址

成分

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
   images = [
    {
      img: 'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg',
    },
    {
      img: 'https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png',
    }
  ];
  public getExstendsion(image) {
    if (image.endsWith('jpg') || image.endsWith('jpeg')) {
      return 'jpg';
    }
    if (image.endsWith('png')) {
      return 'png';
    }
  }
}

网页

 <div  *ngFor="let image of images" >
  
   <span *ngIf="(getExstendsion(image.img) == 'jpg') || getExstendsion(image.img) == 'jpeg'"> 
  <label>JPEG Image</label><img src='{{image.img}}'/>
   </span>
      <span *ngIf="getExstendsion(image.img) == 'png'"> 
  <label>PNG Image</label><img src='{{image.img}}'/>
   </span>
</div>