javascript - How to set a default image in an ionic app - Stack Overflow

admin管理员组

文章数量:1355607

I'm trying to add a default image to an ionic app. Currently I'm getting images inside the app through a link which is in the rows of the tables in the database. However if the image does not exist anymore or the link is broken I want the app to display a default/fall-back image and not this default ripped apart painting icon.

This is one of the methods I have tried getting it to work but it doesn't.

        <ion-card transparent class="detailView" *ngFor="let act of activities">
        <img class="img" src="{{act.image}}"
        onerror="this.src='assets/imgs/defualt.jpg';" alt = "Missing Image" />

{{act.image}} talks to the database, to be precise to the activity table in the database and extracts the image links. How do I implement a default option if the image can't be displayed?

A few extra tidbits; the app is written with Ionic Framework and implements the use of Typescript, Sass and Angular.

I'm trying to add a default image to an ionic app. Currently I'm getting images inside the app through a link which is in the rows of the tables in the database. However if the image does not exist anymore or the link is broken I want the app to display a default/fall-back image and not this default ripped apart painting icon.

This is one of the methods I have tried getting it to work but it doesn't.

        <ion-card transparent class="detailView" *ngFor="let act of activities">
        <img class="img" src="{{act.image}}"
        onerror="this.src='assets/imgs/defualt.jpg';" alt = "Missing Image" />

{{act.image}} talks to the database, to be precise to the activity table in the database and extracts the image links. How do I implement a default option if the image can't be displayed?

A few extra tidbits; the app is written with Ionic Framework and implements the use of Typescript, Sass and Angular.

• javascript
• angular
• typescript
• ionic-framework
• ionic4

Share Improve this question Follow edited Jan 24, 2020 at 13:45 Md. Amirozzaman 1,1351111 silver badges2222 bronze badges asked Jan 24, 2020 at 13:38 SiBastiSiBasti 5511 silver badge55 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Here is what you can do.

<img [src]="act.image" alt="Missing image" onerror="this.onerror=null;this.src='assets/imgs/default.jpg';" />

You’re using a locally saved file as default, so it’s unlikely to happen, but for good practice, clear “onerror” to avoid an endless loop in case the “fallback” image doesn’t exist.

You can try this:

<ion-card transparent class="detailView" *ngFor="let act of activities">
  <img class="img" src="{{act.image}}"alt = "image" *ngIf="act.image" />
  <img class="img" src="assets/imgs/defualt.jpg"alt = "Missing Image" *ngIf="!act.image" />

You can use img tag as describe in ionic and onError fallback

Ref : https://ionicframework./docs/api/img

<img [src]="img.imgsrc" onError="src = 'assets/imgs/user.png'">

I have created an Angular Directive to load default image until image loads and when the image loads it gets rendered on the dom and if it fails to load the default image is shown.

You can use this directive as

<img
    class="item-img-thumbnail border"
    defaultImg
    src="{{ item.src }}"
    alt="..."
/>

Below is directive code image-default.directive.ts file.

import {
  Directive,
  Input,
  HostBinding,
  HostListener,
  OnInit
} from '@angular/core';

@Directive({
  selector: '[defaultImg]'
})
export class ImageDefaultDirective implements OnInit {
  @HostBinding('src')
  @Input()
  src: string;

  _defaultImg: string;
  @Input()
  private set defaultImg(value: string) {
    this._defaultImg = value || 'assets/images/default.svg';
  }

  originalSrc: string;
  isOriginalImgLoaded = false;

  constructor() {}

  /**
   * @description it loads default image 1st and store original src to a variable
   */
  ngOnInit(): void {
    this.originalSrc = this.src || this._defaultImg;
    this.src = this._defaultImg;
  }

  /**
   * @desciption it is called when image is loading fails.
   * For 1st fail - default image, it loads original image
   * On 2nd fail - original image, it loads default image back.
   */
  @HostListener('error')
  onError() {
    if (!this.isOriginalImgLoaded) {
      this.src = this.originalSrc;
      this.isOriginalImgLoaded = true;
    } else {
      this.src = this._defaultImg;
    }
  }

  /**
   * @desciption it is called when image is loaded successfully.
   * 
   * 
   */
  @HostListener('load')
  onLoad() {
    if (!this.isOriginalImgLoaded) {
      this.src = this.originalSrc;
      this.isOriginalImgLoaded = true;
    }
  }
}

NOTE: to change default image path replace assets/images/default.svg with your path in above code.

本文标签： javascriptHow to set a default image in an ionic appStack Overflow