web-dev-qa-db-fra.com

Directive angulaire pour une image de repli

S'il n'existe pas d'image sur un serveur distinct, j'aimerais afficher une image par défaut. Existe-t-il une directive angulaire pour accomplir cela?

angularjsangularjs-directive
61
Matt York

Non, mais vous pouvez en créer un. 

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

Y a-t-il une directive angulaire ...

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

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

(32 étoiles à partir de maintenant)

3
Michal Stefanow

J'ai écrit ma propre bibliothèque de repli. 

Une image de repli angulaire assez simple et directe, lib:

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

Utilitaire permettant de charger des images et de gérer les erreurs d'image, dispose d'un support d'image pour gérer les erreurs de chargement d'image et de chargement d'image pour les espaces réservés de chargement des images 

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

Usage

Ajoutez simplement l'attribut d'image à vos balises <img />

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

Make _ {sure vous n'utilisez pas ng-src comme attribut de votre image src.

Options avancées

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

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

Exemple:

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

1
Alvaro Joao

Angualr 2 Version

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

HTML

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

Composant angulaire 2

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