Question

如果不存在单独服务器上的图像，我想显示默认图像。是否有角度指令来实现这一目标？

Answer 1

不，但你可以创建一个。

<强> HTML：

<img fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/>

<强> JS：

myApp.directive('fallbackSrc', function () {
  var fallbackSrc = {
    link: function postLink(scope, iElement, iAttrs) {
      iElement.bind('error', function() {
        angular.element(this).attr("src", iAttrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});

Answer 2

是否有角度指示...

http://ngmodules.org/modules/angular-img-fallback

Github：https://github.com/dcohenb/angular-img-fallback

（截至目前为32星）

Answer 3

我写了自己的后备库。

一个非常简单明了的角度后备图片库：

https://github.com/alvarojoao/angular-image-fallback

用于加载图像和处理图像错误的实用程序，有图像持有者处理图像加载中的错误和加载占位符的图像的图像加载

http://alvarojoao.github.io/angular-image-fallback

用法

只需将图片属性添加到<img />标记

即可

<img image="{{'path/to/img.jpg'}}" />

制作确定您不能将ng-src用作图片src属性。

高级选项

使用自定义后备和加载占位符：

<img image="{{image.url}}" image-loading="/image/loading.gif" 
     image-holder="/image/error.png" />

实施例

https://jsfiddle.net/alvarojoao/4wec4gsq/embedded/result/

Answer 4

Angualr 2版本

https://github.com/VadimDez/ng2-img-fallback

<强> HTML

<img fallback-src="http://google.com/favicon.ico" src="http://google.com/failedImage.png"/>

Angular 2 Component

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

@Directive({
  selector: '[fallback-src]'
})
export class FallbackSrc {

  @Input('fallback-src') imgSrc: string;
  private el: HTMLElement;
  private isApplied: boolean = false;
  private EVENT_TYPE: string = 'error';

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
    this.el.addEventListener(this.EVENT_TYPE, this.onError.bind(this))
  }

  private onError() {
    this.removeEvents();

    if (!this.isApplied) {
      this.isApplied = true;
      this.el.setAttribute('src', this.imgSrc);
    }
  }

  private removeEvents() {
    this.el.removeEventListener(this.EVENT_TYPE, this.onError);
  }

  ngOnDestroy() {
    this.removeEvents();
  }
}

后备图像的Angular指令

4 个答案:

用法

高级选项

使用自定义后备和加载占位符：

实施例