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 =＆＃34; ./ app / assets / images / {{image.ID}}，则

validImage应该为真.jpg＆＃34;返回图像。否则它将返回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() {
        return 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.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：我事先验证了图像是否被缓存以避免图像在占位符和图像之间闪烁（通常是当内部图像重新渲染的组件时）（如果它被缓存，我会显示甚至在加载标志被设置为真之前的图像）。您可以取消注释isCached功能中的日志，以查看您的图片是否已缓存。

Answer 5

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

src="validImage ? validImageUrl : placeHolderImgUrl"

Answer 7

纯CSS有一种非Angular2方式： Styling Broken Images

但请注意文章中的浏览器支持指标。

Answer 8

如果您要处理类中的错误，以下方法也可以使用：

在您的模板中：

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

在您的课堂上：

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

Angular2：如果img src无效，则显示占位符图像

8 个答案: