Angular中图片src为null时触发404错误的解决方案咨询

当item.itemValue为null时，img标签的src会被解析为无效值，触发浏览器的404请求。以下是几种直接有效的解决方式：

方法1：通过*ngIf控制img渲染 #

直接在img标签上添加*ngIf，仅当item.itemValue不为null时才渲染图片，彻底避免无效请求：

<ng-container [ngSwitch]="item.itemTitle" id="container">
  <img class="img thumbnail" (click)="openDialogImg(myTemplate)"
       *ngSwitchCase="['Graph1', 'Graph2'].includes(item.itemTitle) ? item.itemTitle : !item.itemTitle"
       *ngIf="item.itemValue"
       [src]="_sanitizer.bypassSecurityTrustResourceUrl(item.itemValue)"
       alt="Graph"
  /> 
  <ng-template #myTemplate>                          
    <img *ngIf="item.itemValue" [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>

方法2：设置默认占位图 #

如果希望在图片为空时显示一张默认占位图，而非隐藏图片，可使用三元表达式给src赋值：
首先在组件类中定义默认图路径：

defaultGraphUrl = 'assets/images/default-graph.png'; // 替换为你的本地默认图路径

然后修改模板：

<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]="item.itemValue ? _sanitizer.bypassSecurityTrustResourceUrl(item.itemValue) : defaultGraphUrl"
       alt="Graph"
  /> 
  <ng-template #myTemplate>                          
    <img [src]="item.itemValue ? _sanitizer.bypassSecurityTrustResourceUrl(item.itemValue) : defaultGraphUrl" style="height:100%; width:100%">
    <button id = "x" mat-button (click)="myDialogRef?.close()">X</button>
  </ng-template>                        
  <span *ngSwitchDefault>{{ item.itemValue }}</span>
</ng-container>

注：若默认图为外部URL，同样需要用_sanitizer.bypassSecurityTrustResourceUrl处理。

方法3：自定义安全管道简化模板 #

创建一个自定义管道，统一处理空值和URL安全问题，让模板更简洁：

1. 新建管道文件safe-resource-url.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({ name: 'safeResourceUrl' })
export class SafeResourceUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string, defaultUrl: string = ''): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url || defaultUrl);
  }
}

2. 在模块中声明该管道：

import { SafeResourceUrlPipe } from './safe-resource-url.pipe';

@NgModule({
  declarations: [SafeResourceUrlPipe],
  // ...其他配置
})
export class YourModule { }

3. 在模板中使用管道：

<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]="item.itemValue | safeResourceUrl:'assets/images/default-graph.png'"
       alt="Graph"
  /> 
  <ng-template #myTemplate>                          
    <img [src]="item.itemValue | safeResourceUrl:'assets/images/default-graph.png'" style="height:100%; width:100%">
    <button id = "x" mat-button (click)="myDialogRef?.close()">X</button>
  </ng-template>                        
  <span *ngSwitchDefault>{{ item.itemValue }}</span>
</ng-container>

内容的提问来源于stack exchange，提问作者Mike Micky