Vue项目中v-img无法加载本地assets文件夹图片的问题排查

看起来你遇到了Vue项目里本地图片加载失败的问题，我来帮你梳理排查一下～

从你提供的代码和网络错误信息来看，最后两张本地图片请求返回404，核心原因是Webpack没有正确解析你写的@/assets/...路径，导致浏览器直接请求了带@的原始路径，而这个路径在服务器上是不存在的。下面是具体的排查和解决方法：

一、为什么会出现这个问题？ #

Vue项目里的@是指向src文件夹的别名，但这个别名只有在Webpack处理模块的时候才会生效。你把本地图片路径直接写成字符串放在data里时，Webpack会把它当作普通文本，不会进行路径解析和资源打包，所以浏览器就会直接请求http://localhost:8082/@/assets/images/figma3d.png这个不存在的地址，导致404。

二、具体解决方法 #

方法1：用require()包裹本地图片路径 #

修改你data里的图片路径，用require()把本地资源当作模块引入，这样Webpack就会自动处理路径并打包资源：

projects: [
  // ... 其他项目
  {
    name: "3D Demo 1",
    // ... 其他字段
    image: require("@/assets/images/figma3d.png"),
  },
  {
    name: "Covid Tracker",
    // ... 其他字段
    image: require("@/assets/images/covid_tracker.png"),
  },
]

方法2：提前用import导入图片资源 #

也可以在script开头先导入本地图片，再在data里使用导入的变量：

<script>
import figma3dImg from '@/assets/images/figma3d.png'
import covidTrackerImg from '@/assets/images/covid_tracker.png'

export default {
  name: "Projects",
  data() {
    return {
      projects: [
        // ... 其他项目
        {
          name: "3D Demo 1",
          // ... 其他字段
          image: figma3dImg,
        },
        {
          name: "Covid Tracker",
          // ... 其他字段
          image: covidTrackerImg,
        },
      ],
    };
  },
};
</script>

三、额外检查项（可选） #

如果你用的不是Vue CLI默认生成的项目，可能需要确认vue.config.js里是否正确配置了@别名，确保Webpack能识别这个路径：

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

修改完成后重启项目，你应该就能看到最后两张图片正常加载了～

备注：内容来源于stack exchange，提问作者thefonso