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

【问题标题】：How to set a default image in an ionic app如何在离子应用程序中设置默认图像
【发布时间】：2020-05-10 20:19:49
【问题描述】：

我正在尝试向 ionic 应用添加默认图像。目前，我通过 数据库 中表行中的链接在应用程序内获取图像。但是，如果图像不再存在或链接断开，我希望应用显示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}} 与数据库对话，精确到数据库中的活动表并提取图像链接。无法显示图片如何实现默认选项？

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

【问题讨论】：

标签： javascript angular typescript ionic-framework ionic4

【解决方案1】：

我创建了一个 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;
    }
  }
}

注意：要更改默认图像路径，请将assets/images/default.svg 替换为上述代码中的路径。

【讨论】：

【解决方案2】：

这是你可以做的。

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

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

【讨论】：

在我现在的默认/占位符图像之上，我仍然得到这个损坏的小图像图标。如何删除它？

【解决方案3】：

您可以使用 img 标签，如 ionic 和 onError fallback 中所述

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

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

【讨论】：

我试过了，但我的代码被标记为一种非常奇怪的方式，让我觉得我的编辑器没有将它视为链接。 ``` jasminauburn.com.au/wp-content/themes/jasmine-family-restaurent/images/noimage.png'"/> ```
如果出现错误，请尝试使用本地图片 url，因为这样更快。使用大小写字母onError="src = 'assets/imgs/user.png'"

【解决方案4】：

你可以试试这个：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。