如何在离子应用程序中设置默认图像

Question

我正在尝试将默认图像添加到 ionic 应用程序。目前，我通过 数据库 中 table 行中的 link 在应用程序中获取图像。但是，如果图像不再存在或 link 损坏，我希望应用程序显示 default/fall-back 图像，而不是这个默认的撕开的绘画图标。

这是我试过的方法之一，但没有成功。

        <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}}与数据库对话，准确的说是数据库中的activitytable并提取图像link秒。图片无法显示时如何实现默认选项？

一些额外的花絮；该应用程序是用 Ionic 框架编写的，并实现了 Typescript、Sass 和Angular.

Answer 1

你可以试试这个：

<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" />

Answer 2

您可以按照 ionic 和 onError 回退中的描述使用 img 标签

参考：https://ionicframework.com/docs/api/img

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

Answer 3

这是您可以执行的操作。

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

您默认使用的是本地保存的文件，因此不太可能发生这种情况，但作为良好做法，清除“onerror”以避免无限循环，以防“回退”图像不存在。

Answer 4

我创建了一个 Angular 指令来加载默认图像，直到图像加载，当图像加载时，它会在 dom 上呈现，如果加载失败，则显示默认图像。

您可以将此指令用作

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

下面是指令代码 image-default.directive.ts 文件。

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.

如何在离子应用程序中设置默认图像

How to set a default image in an ionic app

javascript

typescript

ionic-framework

angular

ionic4