如何在Source为空或未定义时禁用图像标记，或者在Angular4中禁用“”或null

Question

我正在使用Angular4应用程序，在此我是来自API的绑定图像路径。

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

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

目前，如果图像源不是有效源，则显示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>

Answer 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']">