javascript - 基于连续延伸的 Angular 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

Here is the sample code please check it

StackBitz url

组件

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';
    }
  }
}

HTML

 <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>