Angular应用图片在iOS端（Safari/Chrome）无法显示求助

数据老陈

2026-6-17

iOS设备上Angular应用图片无法显示的排查与解决方法

核心排查与修复步骤

检查路径大小写一致性：iOS文件系统严格区分大小写，Windows和Android则不区分。确认<img>标签里的路径（比如./logo.png）和实际文件的文件名、目录名完全一致，包括大小写。
修正Angular资源配置：确保图片被Angular构建系统正确打包。打开angular.json，在assets数组中添加图片所在目录或单个文件：
```
"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/logo.png"
]
```
之后改用绝对路径引用图片：<img src="/logo.png">，避免相对路径在不同系统下的解析差异。
添加版本戳规避缓存问题：给图片URL添加版本参数，强制浏览器重新加载资源：
```
<img src="./logo.png?v=1.0.0">
```
验证图片格式兼容性：确认图片是iOS原生支持的格式（如标准PNG、JPG），若使用WebP等格式，转成兼容格式重试。
手动触发预加载：在组件代码中手动创建Image对象预加载图片，替代link preload的方式：
```
ngOnInit() {
  const preloadImg = new Image();
  preloadImg.src = './logo.png';
}
```