폴백 이미지에 대한 각도 지시

폴백 이미지에 대한 각도 지시

다른 서버에 이미지가 없는 경우는 디폴트 이미지를 표시하고 싶습니다.이를 달성하기 위한 각도 지시가 있습니까?

아니요, 만들 수 있습니다.

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

각도 지시가 있나요?

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

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

(현재 별 32개)

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 구성 요소

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

내가 직접 폴백 리브를 썼어

꽤 심플하고 간단한 각도 폴백 이미지 lib:

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/

언급URL : https://stackoverflow.com/questions/16349578/angular-directive-for-a-fallback-image