当 angular 中 `` 标签的 `[src]` 绑定值为 `null` 或空字符串时，浏览器会将其解析为相对路径 `"null"` 或 `""`，导致发起无效请求并返回 404；正确做法是条件渲染图片元素，或提供默认占位符，避免空 src 被解析。
在 Angular 应用中，使用 [src] 动态绑定图片地址时，若数据源（如 item.itemValue）为 null、undefined 或空字符串，Angular 仍会将 元素渲染到 DOM 中，且其 src 属性被设为字面量 "null" 或 ""。此时浏览器会尝试向当前域名下请求 /null 或 /（取决于 base URL），自然返回 HTTP 404 —— 这并非框架 Bug，而是 HTML 规范行为：空或非法 src 值会被当作有效 URL 处理并发起网络请求。
✅ 正确解决思路有两类，推荐优先使用第一种：
✅ 方案一：条件渲染（推荐）
仅在 item.itemValue 确为有效非空 URL 时才渲染 标签，彻底避免无效 src：
@@##@@ @@##@@ {{ item.itemValue }}
? 关键改进点：将原 *ngSwitchCase 中冗余的三元逻辑移除，仅保留语义清晰的标题匹配；新增 *ngIf="item.itemValue && item.itemValue.trim()"，严格校验字符串非空（防空白字符）；同步应用到弹窗内的 ，确保一致性。
⚠️ 方案二：降级占位方案（次选）
若需始终显示图片容器（如维持布局高度），可绑定默认占位图（如 SVG 或本地资源）：
@@##@@
⚠️ 注意事项：
- bypassSecurityTrustResourceUrl() 仅适用于可信的动态 URL（如 Base64、blob:、http(s):）；若 item.itemValue 来自用户输入，务必先校验协议与格式，否则存在 XSS 风险；
- 不要对 null/undefined 直接调用 bypassSecurityTrustResourceUrl()，它会返回 SafeResourceUrl 对象，但 Angular 模板中若绑定 null 仍会触发 404；
- 开发阶段建议开启 Chrome DevTools 的 Network → Filter → XHR / Img，快速定位异常请求来源。
? 总结：404 根源在于“渲染了带空 src 的 img 标签”，而非数据本身。坚持「数据驱动渲染」原则——有图才画图，无图不占位（或显式降级），即可从源头规避该问题。
