Directive angular pour une image de repli

Si une image sur un serveur distinct n’existe pas, j’aimerais afficher une image par défaut. Y a-t-il une directive angular pour accomplir cela?

Non mais vous pouvez en créer un.

http://jsfiddle.net/FdKKf/

HTML:

 

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

Y a-t-il une directive angular …

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

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

(32 écanvass dès maintenant)

J’ai écrit ma propre librairie de repli.

Une image de repli angular simple et directe lib:

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

Utilitaire pour travailler avec le chargement d’images et la gestion des erreurs d’image, support d’image pour gérer les erreurs de chargement d’image et de chargement d’image pour les images chargeant des espaces réservés

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

Usage

Ajoutez simplement l’atsortingbut image à vos balises

  

Assurez- vous de ne pas utiliser ng-src comme atsortingbut ng-src de votre image.

Options avancées

avec des espaces réservés personnalisés et de chargement:

  

Exemple:

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

Angualr 2 Version

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

HTML

  

Composant angular 2

 import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[fallback-src]' }) export class FallbackSrc { @Input('fallback-src') imgSrc: ssortingng; private el: HTMLElement; private isApplied: boolean = false; private EVENT_TYPE: ssortingng = '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.setAtsortingbute('src', this.imgSrc); } } private removeEvents() { this.el.removeEventListener(this.EVENT_TYPE, this.onError); } ngOnDestroy() { this.removeEvents(); } }