Angular，默认图像占位符，基于文件的扩展名

Question

在我的角度4项目中，我必须加载一些缩略图，我有缩略图形式的许多类型的东西，如PDF，图像，文档等。

我加载图片的代码是：

 <div class="card-image">
      <img class="img" src="{{pic.selfLink}}/thumbnail?width={{width}}">
  </div>

但很明显，如果没有任何缩略图，我必须加载一些默认图像，这个默认图像需要根据文件的扩展名而有所不同。

我怎样才能做到这一点？

Answer 1

创建一个方法，根据扩展名返回defult图像。

<强> HTML：

This is called if data is not there

<div class="card-image">
      <img class="img" *ngIf="!pic.image" src="getDefaultImage(pic.extension)">
  </div>

在组件中：

根据扩展名

返回图像

public getDefaultImage(extension) {
    let defaultImage = '';
    switch (extension) {
    case 'img':
        defaultImage = "something";
        break;
    case 'txt':
        defaultImage = "something";
        break;
    case 'pdf':
        defaultImage = "something";
        break;
  }
  return defaultImage;
}

Answer 2

您可以将图像源绑定到组件类中的函数。

<img [src]="getImageSource()">

在component.ts文件中

  getImageSource() {
    const imageSource: String;
    if (pic.selfLink) {
      imageSource = `${this.pic.selfLink}/thumbnail?width=${this.width}`;
    } else {
      imageSource = 'Path to your alt image';
    }
  }