适用于后备图像的angular度指令

如果一个单独的服务器上的图像不存在，我想显示一个默认的图像。 有没有一个angular度指令来完成这个？

Answer 1

不，但你可以创build一个。

http://jsfiddle.net/FdKKf/

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

有没有angular度指示…

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

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

（截至目前为止是32颗星）

Answer 3

我写了自己的回退库。

一个非常简单和直接的angular度后备图像库：

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"/> 

angular2组件

 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(); } }