Vue3项目index.html中img标签无法加载图片的问题咨询

核心原因 #

Vue3项目中，public目录下的文件属于静态资源根目录，会直接被复制到构建后的dist根目录，不经过webpack编译处理；而src目录下的资源会被webpack打包重命名（比如添加hash后缀），且打包后的目录结构和原src完全不同。

你在public/index.html里用../src/assets/pic/wh.jpg这种相对路径，浏览器会从项目运行的服务器根目录解析路径，../src会指向服务器根目录的上层，这显然不存在，所以图片加载失败。VSCode能打开是因为它基于本地文件系统的绝对路径解析，和浏览器的服务器上下文完全不同。

解决方法 #

• 方法1：将图片移至public目录
  把图片放到public/assets/pic/wh.jpg，修改index.html中的路径为：

  <nav><img src="/assets/pic/wh.jpg"></nav>
  

  这里的/对应服务器根目录（即public目录的根），构建后会直接指向dist下的assets目录。

• 方法2：在Vue组件中引用图片
  不要在public的index.html里写导航栏，把导航栏迁移到Vue组件中，通过webpack的方式引用图片：

  <template>
    <nav><img :src="require('@/assets/pic/wh.jpg')"></nav>
  </template>
  

  或者用ES模块导入：

  <script setup>
  import whImg from '@/assets/pic/wh.jpg'
  </script>
  <template>
    <nav><img :src="whImg"></nav>
  </template>
  

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