Angular 18.2.10本地图片加载失败问题求助

1. 确认静态资源目录配置 #

不同开发框架/环境对静态资源的处理规则不同，需对应调整：

• 纯静态HTML项目：若使用/assets/img.png这类根路径，必须确保本地服务器从项目根目录启动（比如用python -m http.server时，要在项目根目录执行命令），否则根路径会指向服务器系统根目录而非项目根。
• Vue项目：public目录下的资源直接用/img.png（从public根目录开始）；src/assets下的图片需通过import img from '@/assets/img.png'引入后使用，不能直接写路径字符串。
• React项目：public目录下的资源用/assets/img.png，但要保证public是服务器的静态资源根目录；src/assets下的图片需通过import引入，再赋值给src属性。

2. 检查路径大小写 #

多数服务器（如Linux环境的Nginx、Node.js服务器）区分文件名大小写，若图片实际是Img.png但你写的是img.png，会直接返回404。务必核对文件管理器里的准确文件名，保证引用路径完全匹配。

3. 验证资源访问权限 #

• 检查文件权限：Linux/macOS下用ls -l查看图片文件权限，确保服务器进程有读取权限（一般设置为644即可）；Windows下右键文件，在「属性-安全」里确认当前用户有读取权限。
• 确认服务器目录访问限制：部分框架的开发服务器会限制仅能访问指定目录（如public、src），若图片放在项目外的目录，肯定无法加载。

4. 查看浏览器控制台错误信息 #

按F12打开开发者工具，切换到Network标签，刷新页面观察图片请求状态：

• 404错误：路径完全错误，重新核对文件位置与引用路径；
• 403错误：权限不足，检查文件或目录的访问权限；
• 200状态但图片不显示：直接在浏览器地址栏输入图片URL，确认图片本身是否能正常打开（排除图片损坏的可能）。

5. 清理浏览器缓存 #

浏览器可能缓存了旧的错误路径，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，也可在开发者工具中勾选「Disable cache」后重新测试。

6. 区分绝对路径与相对路径 #

• 相对路径：比如./assets/img.png，是相对于当前HTML文件的位置，适合页面不在服务器根目录的场景；
• 绝对路径：/assets/img.png是相对于服务器根目录，仅当项目部署在服务器根目录或本地服务器从项目根启动时才有效。

举个例子，若项目结构为：

my-project/
├── index.html
└── assets/
    └── img.png

在index.html中使用<img src="./assets/img.png">一定能加载成功，而/assets/img.png则需要确保服务器在my-project目录下启动。

内容的提问来源于stack exchange，提问作者Dilker Winter