前端项目Dialog组件图片加载失败（404错误）求助

问题根源 #

你写的绝对路径/src/assets/images/img.jpg会让浏览器直接请求服务器根目录下的src文件夹，但前端项目编译后，src源码目录不会被打包到生产环境的根目录里，assets下的资源会被处理后放到打包后的静态资源目录（比如dist/assets），所以这个路径找不到文件。

可行解决方案 #

• 相对路径引用：根据组件所在位置计算相对路径。比如组件在src/components/Dialog.vue，路径应改为：

  <div>
      <img #imageElement src="../assets/images/img.jpg" alt="Image" />
  </div>
  

  核心是从当前组件文件目录出发，定位到assets文件夹的位置。

• 根目录别名引用（推荐）：Vue项目默认配置了@作为src目录的别名，直接用别名即可：

  <div>
      <img #imageElement src="@/assets/images/img.jpg" alt="Image" />
  </div>
  

  如果是React等其他框架，可在webpack或vite的配置文件中设置@指向src目录，这样不管组件在哪个层级，都能统一用@/assets/...引用资源。

• public目录存放：把图片放到项目根目录的public文件夹下（比如public/assets/images/img.jpg），此时用根路径引用：

  <div>
      <img #imageElement src="/assets/images/img.jpg" alt="Image" />
  </div>
  

  public目录下的资源会被直接复制到打包后的根目录，无需编译处理。

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