html 404问题当图像src为空

mrwjdhj3  于 2023-04-10  发布在  其他
关注(0)|答案(2)|浏览(247)

我有一个使用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错误

o7jaxewo

o7jaxewo1#

当图像源显示null时,浏览器正在搜索名为null的图像。由于您没有同名图像,因此404(未找到)错误实际上是正确的。
尝试在<img>周围使用if语句,首先检查源代码。如果没有源代码(null),请不要将<img>标记打印到html中。

htrmnn0y

htrmnn0y2#

尝试添加一个子句来检查图像src == null。如果是,您可以放置替换图像或根本不执行标记。

相关问题