If an image on a separate server doesn't exist I'd like to display a default image. Is there an angular directive to accomplish this?
2
- Not that I've seen, but it wouldn't be hard to write one.Josh David Miller– Josh David Miller2013-05-02 23:59:06 +00:00Commented May 2, 2013 at 23:59
- Possible duplicate of if a ngSrc path resolves to a 404, is there a way to fallback to a default?Jon Onstott– Jon Onstott2017-07-05 18:41:19 +00:00Commented Jul 5, 2017 at 18:41
Add a comment |
5 Answers
No but you can create one.
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; }); 
12 Comments
kfis
Nice! I only want to add, that if he hasn't jQuery included, he should write iElement.on('error',function() {
Ketan
Not sure why I put
angular.element but iElement may have worked too
jpotts18
This is a good directive. I had a problem with it because the ng-src could also be a null value. Here was my fix. I hope it helps. gist.github.com/jpotts18/7161375
atian25
just use
iAttrs.$set('src', iAttrs.fallbackSrc)Ketan
@Dalibor instead of this line
angular.element(this).attr("src", iAttrs.fallbackSrc); You need to add the code to invoke the modal. |
Is there an angular directive...
http://ngmodules.org/modules/angular-img-fallback
Github: https://github.com/dcohenb/angular-img-fallback
(32 stars as of now)
Comments
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"/> 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(); } } 
Comments
I wrote my own fallback lib.
A pretty simple and straightforward angular fallback image lib:
https://github.com/alvarojoao/angular-image-fallback
Utility to work with loading images and handling image error, has image-holder to handle errors in image loading and image-loading for images loading placeholders
http://alvarojoao.github.io/angular-image-fallback
Usage
Just add the image attribute to your <img /> tags
<img image="{{'path/to/img.jpg'}}" /> Make sure you don't use ng-src as your image src attribute.
Advanced options
with custom fallback and loading placeholders:
<img image="{{image.url}}" image-loading="/image/loading.gif" image-holder="/image/error.png" /> Example:
Comments
I think this will also work
import { Directive, HostBinding, HostListener, Input } from '@angular/core'; @Directive({ selector: 'img[imgFallback]', }) export class DefaultImageDirective{ public defaultImg: string = './assets/img/default-image-placeholder.svg'; @Input() src!: string; @HostBinding('src') get originalSrc() { return this.src; } @HostListener('error') onError() { this.src = this.defaultImg; } } Usage:
<img imgFallback [src]="productItemImage" alt="Sample alt text" /> 