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

8 回答

• 92

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

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

  回复于 2024-05-10T05:20:41+08:00
• 16

  我遇到了类似的需求 . 如果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;
      }
  }
  

  回复于 2024-05-10T05:20:41+08:00
• 0

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

  在组件类的某个地方：

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

  回复于 2024-05-10T05:20:41+08:00
• 1

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

  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：我事先验证图像是否被高速缓存以避免图像闪烁（通常是当内部图像被重新渲染的组件重新渲染时）占位符和图像之间（如果它被缓存，我甚至在加载之前显示图像flag设置为true） . 您可以取消注释 isCached 函数中的日志，以查看您的图像是否已缓存 .

  回复于 2024-05-10T05:20:41+08:00
• 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;
  }
  

  回复于 2024-05-10T05:20:41+08:00
• 0

  src="validImage ? validImageUrl : placeHolderImgUrl"
  

  回复于 2024-05-10T05:20:41+08:00
• 20

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

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

  回复于 2024-05-10T05:20:41+08:00
• 0

  我这样做了：

  在我的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不同，如果为true则返回图像url否则我返回我的app资产中的默认"noFound"图像 .
  希望能帮助到你！

  回复于 2024-05-10T05:20:41+08:00