Vue项目中public目录图片无法显示的解决求助

嘿，我之前也踩过这个坑！Vue项目里public目录的静态资源引用有特定的规则，咱们来一步步搞定这个问题：

核心问题：路径引用错误 #

Vue的public目录是静态资源的根目录，打包后里面的文件会直接放到项目的根路径下。所以你之前写的./public/images/xxx或者public/images/xxx都是错误的相对路径，Vue会从组件所在目录去查找，自然找不到图片。

正确的解决方案 #

把图片路径改成以斜杠/开头的绝对路径，直接指向public下的images文件夹，不需要加public前缀：

修改你的data部分代码：

export default {
  data() {
    return {
      items: [
        { name:'first', src:'/images/anubis.png', subtitle: 'Anubis' },
        { name:'second', src:'/images/sarcophagus.png', subtitle: 'Sarcophagus' },
        { name:'third', src:'/images/ra.png', subtitle: 'Ra' },
        { name:'fourth', src:'/images/eye-of-ra.png', subtitle: 'Eyes of Ra' }
      ]
    }
  }
}

关于require()的补充说明 #

你之前尝试用require()没成功，是因为require()主要用于src/assets目录下的资源（这类资源会被webpack处理），而public目录的资源是直接暴露在根路径的，不需要通过require引入，直接用绝对路径就好。

额外检查点 #

• 确认public/images目录确实存在，图片文件名和扩展名没有拼写错误（注意Linux/macOS系统区分大小写）
• 开发环境下可以打开浏览器控制台，查看图片的请求路径是否正确，如果显示404，再核对路径是否符合上述规则

这样修改后，你的图片应该就能正常显示了！

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