Angular2:如果img src无效,则显示占位符图像

Question

目标:使用动态源加载图像.如果未找到图像,则改为加载占位符图像.

这应该说明我正在尝试做什么,但我不知道如何根据第一个img src是否有效来有条件地设置validImage.

<img *ngif="validImage" class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" alt="...">
<img *ngif="!validImage" class="thumbnail-image" src="./app/assets/images/placeholder.jpg" alt="...">

如果src ="./ app/assets/images/{{image.ID}},则validImage应为true.jpg"返回图像.否则它将返回false并且只显示第二个img标记.

有明显的工作方法,比如存储所有有效图像源的列表,但我认为有更好的方法来实现这一点.

关于在Angular2中实现此方法的最佳方法的任何建议将不胜感激.

Answer 1

处理损坏的图像链接的最佳方法是使用onError事件作为<img>标记:

<img  class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg"
      onError="this.src='./app/assets/images/placeholder.jpg';"  alt="..." />

Answer 2

我遇到了类似的需求.如果img url为null或返回错误(404等),我想默认为1X1透明像素.

import { Directive, Input } from '@angular/core';

@Directive({
    selector: 'img[src]',
    host: {
        '[src]': 'checkPath(src)',
        '(error)': 'onError()'
    }
})
export class DefaultImage { 
    @Input() src: string;
    public defaultImg: string = '{YOUR_DEFAULT_IMG}';
    public onError() {
        this.src = this.defaultImg;
    }
    public checkPath(src) {
        return src ? src : this.defaultImg;
    }
}

Answer 3

<img [src]="pic" (error)="setDefaultPic()">

在组件类的某个地方:

setDefaultPic() {
  this.pic = "assets/images/my-image.png";
}

Answer 4

如果您想处理类中的错误，以下方法也适用：

在您的模板中：

<img [src]='varWithPath' (error) ="onImgError($event)">

在你的课堂上：

onImgError(event) { 
    event.target.src = 'assets/path_to_your_placeholder_image.jpg';
}