我有一个使用img标签来显示图像的代码。问题是当图像src为空时,我会得到一个错误,说404错误。我如何解决这个问题。我将在下面分享我的代码。
<ng-container [ngSwitch]="item.itemTitle" id="container">
<img class="img thumbnail" (click)="openDialogImg(myTemplate)"
*ngSwitchCase="
['Graph1', 'Graph2'].includes(item.itemTitle)
? item.itemTitle
: !item.itemTitle
"
[src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)"
alt="Graph"
/>
<!-- this template is invisible. It will be shown in the popup -->
<ng-template #myTemplate>
<!-- this is a big popup image. -->
<img [src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)" style="height:100%; width:100%">
<button id = "x" mat-button (click)="myDialogRef?.close()">X</button>
</ng-template>
<span *ngSwitchDefault>{{ item.itemValue }}</span>
</ng-container>
当graph1和graph2图像数据为空时,我得到404错误
2条答案
按热度按时间o7jaxewo1#
当图像源显示
null
时,浏览器正在搜索名为null
的图像。由于您没有同名图像,因此404(未找到)错误实际上是正确的。尝试在
<img>
周围使用if语句,首先检查源代码。如果没有源代码(null
),请不要将<img>
标记打印到html中。htrmnn0y2#
尝试添加一个子句来检查图像src == null。如果是,您可以放置替换图像或根本不执行标记。