Javascript 如何在ionic应用程序中设置默认图像

我正在尝试将默认图像添加到爱奥尼亚应用程序中。目前，我通过数据库中表行中的链接获取应用程序内部的图像。但是，如果图像不再存在或链接断开，我希望应用程序显示一个

默认/后退

图像，而不是这个默认的撕开的绘画图标

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

        <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框架编写的，并实现了对类型脚本、Sass和角度的使用。您可以尝试以下方法：

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

---

您可以使用ionic和onError fallback中描述的img标记

参考：

---

以下是您可以做的

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

---

您使用的是本地保存的文件作为默认文件，因此不太可能发生这种情况，但为了获得良好的实践效果，请清除“onerror”，以避免在出现“回退”时出现无休止的循环图像不存在。

我创建了一个角度指令来加载默认图像，直到图像加载，加载时在dom上渲染，如果加载失败，则显示默认图像

您可以将此指令用作

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

注意：若要更改默认图像路径，请使用上述代码中的路径替换

资产/images/default.svg

---

虽然这段代码可能会回答这个问题，但提供关于它如何和/或为什么解决问题的附加上下文将提高答案的长期价值。我尝试过这一点，但我的代码被以一种非常奇怪的方式标记，这让我觉得我的编辑没有将此视为链接```如果出现错误，请尝试使用本地图像url，因为这会更快。使用大写字母和小写字母

onError=“src='assets/imgs/user.png'”

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

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