Angular项目中assets文件夹内图片无法加载显示问题求助

架构老林

2026-10-15

路径引用报错与图片不显示解决方案

核心原因

你使用的多级相对路径在前端脚手架环境下会经历两次路径解析：一次是编辑器基于本地文件系统的跳转解析，一次是构建工具的打包资源映射解析，只要两次解析的根目录基准不一致，就会同时出现跳转失败、浏览器加载失败的问题。

修复方案

方案1：使用模块化引入（最推荐）
Vue/React/Vite等主流脚手架都支持assets资源的模块化引入，完全规避路径解析不一致问题：

// 脚本部分先引入资源
import graphicImg from '@/assets/graphic.png'

// 模板中调用
// React 写法
<img src={graphicImg} alt="" />
// Vue 写法
<img :src="graphicImg" alt="" />

方案2：使用public目录绝对路径
把图片移动到项目根目录的public文件夹下，直接用根路径引用，编辑器跳转和浏览器渲染均可正常生效：
```
<img src="/graphic.png" alt="">
```
方案3：对齐开发与生产的路径层级
如果你坚持使用相对路径，需要确认组件文件的本地目录层级，和构建后打包产物中js文件与assets文件夹的相对层级完全一致，否则会出现开发环境跳转正常但生产环境加载失败的问题。