如何在未加载图像或 API 返回的路径在 Angular4 中无效时禁用图像标记答案

【问题标题】：How to disable image tag when image is not loaded or API returned path is not valid in Angular4如何在未加载图像或 API 返回的路径在 Angular4 中无效时禁用图像标记
【发布时间】：2018-04-04 09:11:41
【问题描述】：

我在一个 Angular 应用程序中工作，在这个应用程序中我使用的是图像。图像路径是通过 API 从数据库获取的。

当用户点击产品时，产品名称将传递给 API，并获取与产品相关的图像作为响应。在我的应用程序中，特定产品最多有五个图像。

如果我将鼠标悬停在图像上，它将显示它的大尺寸图像。

我的 HTML

<div class="row">
      <img id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" [attr.ref]="bigImages['0']['big_Images']">
      <img id="sm005" (mouseenter)="mouseEnter($event)"  src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" [attr.ref]="bigImages['1']['big_Images']">
      <img id="sm002" (mouseenter)="mouseEnter($event)"  src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" [attr.ref]="bigImages['2']['big_Images']">
      <img id="sm003" (mouseenter)="mouseEnter($event)"  src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" [attr.ref]="bigImages['3']['big_Images']">
      <img id="sm004" (mouseenter)="mouseEnter($event)"  src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" [attr.ref]="bigImages['4']['big_Images']">
  </div>

我想做的是……

1，如果 API 只返回 3 张图片（最多 5 张），我想隐藏剩余的 2 个 img 标签（我不想显示任何 alt 标签内容，只想完全禁用 img 标签）。

2，如果在img标签中没有加载API返回的图像路径（不存在于assets文件夹中），我想禁用该img标签。（空或null或“”或未定义）。

是否有可能请指导我解决这个问题。谢谢

【问题讨论】：

根据条件检查，您可以保持布尔值，我们可以采用这样的条件

标签： html angular

【解决方案1】：

关于问题 1：

<div *ngFor="let image of smallImages">
   <img [src]="image.small_Images" (mouseenter)="...">
</div>

ngFor 让您可以访问其中的let <value>。这使其自动添加数组中可用的图像数量。

关于问题 2：

这有点困难，因为这意味着您必须预加载图像。

你可以查找一些方法来做到这一点，但我认为你在这里谈论的是两个非常不同的问题，所以通常你会把它变成两个不同的问题。

关于预加载图像的简单（TypeScript 中的 JavaScript）方式：

const img = new Image(); 
img.onload = () => {
    console.log('Images is loaded and exists!');
}
img.onerror = () => {
    console.log('Image could not be loaded for whatever reason.');
}
img.src = 'blabla'

当然，您需要弄清楚如何在结果中运行此代码。所以你说的是组件逻辑和模板逻辑之间的很大区别；因此：这应该是一个不同的问题和不同的 StackOverflow 问题。

【讨论】：

【解决方案2】：

您应该使用“ngFor”来循环通过针对您的 API 的查询返回的图像集，而不是纯粹在 HTML 中控制图像显示，如下所示：

<div class="row">
  <ng-template *ngFor="let image of images">
    <img id="{{image.id}}" (mouseenter)="mouseEnter($event)"  src="{{image.url_small}}" alt="{{image.alt}}" class="img-thumbnail" [attr.ref]="{{image.url_big}}">
  </ng-template>
</div>

然后，当您处理返回图像数据的 API 的结果时，您将在 Typescript 代码中构建 images 数组作为控制器的属性。

“英雄之旅”在他们关于显示数据的页面上对此进行了介绍，here。

如果您提供有关您提出请求的 API 的更多详细信息以及发出这些请求的实际代码，我可以提供更集中的答案，但希望您可以从这里获取。

【讨论】：