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}}.jpg" 返回图像，validImage 应该是 true。否则它将返回false，并且只会显示第二个img 标签。

有一些明显的变通方法，例如存储所有有效图像源的列表，但我认为有更好的方法来实现这一点。

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

Answer 1

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

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

Answer 2

<img class="thumbnail-image" src="getImage()" alt="...">

getImage():string{  //I don't know how would you handle your situation here. But you can think of it.

  if (this.validImage) // I don't know how would you manage validImage here.
  {
     return this.validImagePath;
  }

   return this.placeholderImagePath;
}

Answer 3

src="validImage ? validImageUrl : placeHolderImgUrl"

Answer 4

我遇到了类似的需求。如果 img url 为空或返回错误（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;
    }
}

标记

<img [src]="{DESIRED_IMAGE_SOURCE}" />

Answer 5

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

在你的组件类中的某个地方：

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

Answer 6

如果图像仍未加载或加载时出现错误，我创建了一个使用占位符图像的自定义组件：

img.component.ts:

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

@Component({
    selector: 'my-img',
    templateUrl: 'img.component.html',
})
export class ImgComponent implements OnChanges {
    @Input() 
    public src: string;
    @Input() 
    public default: string;
    @Input() 
    public alt: string;
    public cached = false;
    public loaded = false;
    public error = false;

    private lastSrc: string;

    constructor() { }

    public ngOnChanges() {
        if (this.src !== this.lastSrc) {
            this.lastSrc = this.src;
            this.loaded = false;
            this.error = false;
            this.cached = this.isCached(this.src);
        }

        if (!this.src) {
            this.error = true;
        }
    }

    public onLoad() {
        this.loaded = true;
    }

    public onError() {
        this.error = true;
    }

    private isCached(url: string): boolean {
        if (!url) {
            return false;
        }

        let image = new Image();
        image.src = url;
        let complete = image.complete;

        // console.log('isCached', complete, url);

        return complete;
    }
}

img.component.html:

<ng-container *ngIf="!cached">
    <img 
        *ngIf="!error" 
        [hidden]="!loaded"
        [src]="src" 
        [alt]="alt" 
        (load)="onLoad()" 
        (error)="onError()"
    >
    <img 
        *ngIf="default && (error || !loaded)" 
        [src]="default" 
        [alt]="alt"
    >
</ng-container>

<ng-container *ngIf="cached">
    <img 
        *ngIf="!error" 
        [src]="src" 
        [alt]="alt" 
        (error)="onError()"
    >
    <img 
        *ngIf="default && error" 
        [src]="default" 
        [alt]="alt"
    >
</ng-container>

然后你可以像这样使用它：

<my-img [src]="src" [alt]="alt" [default]="DEFAULT_IMAGE"></my-img>

PS：我预先验证图像是否被缓存以避免图像在占位符和图像之间闪烁（通常是在重新渲染内部包含图像的组件时）（如果它被缓存，我显示甚至在加载标志设置为 true 之前的图像）。您可以在isCached函数中取消注释日志以查看您的图像是否被缓存。

Answer 7

我刚刚这样做了：

在我的 HTML 文件中写了这个

<div 
   (click)="getInfo(results[movie].id)"
   *ngFor="let movie of (results | key:'10')" 
    class="card" style="margin-top:7%;">
 <img [src]="getImage(results[movie])" alt="" class="card-img-top pointer"></div>

我调用了我的 component.ts 中的一个函数，并将我的 url 所在的对象作为参数传递

getImage(result){
if(result.poster_path){
  return this.imageURL+(result.poster_path);
}else return "./assets/noFound.jpg"

继承我的功能，首先我验证对象图像 url 是否不同于 null 如果为真，然后我返回图像 url，否则我返回我的应用程序资产中的默认“noFound”图像。
希望对您有所帮助！

Answer 8

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

在您的模板中：

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

在你的课堂上：

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