当源为空或未定义或Angular4中的“”或null时如何禁用图像标签答案

【问题标题】：How to disable image tag when source is empty or undefined or " " or null in Angular4当源为空或未定义或Angular4中的“”或null时如何禁用图像标签
【发布时间】：2018-04-04 15:10:34
【问题描述】：

我正在使用 Angular4 应用程序，在此我正在从 API 绑定图像路径。

在这个应用程序中，当我将鼠标悬停在将显示该图像的大尺寸的小图像上时，我有一个 HTML 页面。

我想要做的是当图像路径为空或未定义或为空或“”时，我不想显示该图像。

目前，如果图像源不是有效来源，它会显示 alt 标签。但我不想禁用 alt 标签，只需禁用整个图像部分

我的 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>

【问题讨论】：

使用*ngIf='smallImages['0']['small_Images'] ? false : true

标签： html angular

【解决方案1】：

您可以将*ngIf="smallImages['0']['small_Images']" 与img 标签一起使用

<img *ngIf="smallImages['0']['small_Images']'" id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" [attr.ref]="bigImages['0']['big_Images']">

【讨论】：

Vivek Doshi ，我已根据您的建议更改了图像路径，如下所示，它显示 alt 标签但是在 API 响应中只有 0 到 4 的值。所以它应该验证路径是否包含有效的 url，如果它不是有效的，则必须禁用 img 标签。
我只添加了第一张图片，在下面的评论中，您在单个标签中混合了多个索引，例如 4 5 6 ，它应该对所有都相同
1，对于第五行src="{{smallImages['4']['small_Images']}}" 这个src的路径是assets/Images/Product_Details_Page/Product_Details_Page_Thumbnails/bal101.png但这不是有效路径，因此未加载图像，然后显示 alt..
2，如果我的 API 返回 3 个 src，我有 5 个 img 标签，那么剩下的 2 个未定义或为空或为空，所以在这种情况下，我只想显示 3 个图像。剩下的 2 个我不显示不想显示任何东西。请指导我实现这一目标。
仅当 API 响应路径未加载（因为该路径在资产文件夹 Angular4 中不存在）或 API 未返回特定 img 标签的路径时，该标签必须被取消。 .这就是我想做的事