Vue组件中用require动态绑定v-img的:src属性遇问题求助

问题根源 #

Webpack在打包时会静态分析require()的参数，只有硬编码的完整路径才能被正确识别并处理图片资源。如果用变量拼接路径，Webpack无法提前预知需要打包哪些图片，就会抛出「Module not found」或「Module parse failed」错误。

解决方案 #

1. 用require.context预加载指定目录的图片

通过Webpack的上下文模块功能，提前告诉Webpack要打包指定目录下的图片，这样动态路径就能被正确解析：

// 在组件内定义上下文（放在方法外）
const imageContext = require.context('../../public/', false, /\.(jpg|png|svg)$/);

public getImg(img: string) {
  // 注意路径要以./开头，匹配上下文的相对路径
  return imageContext(`./${img}`);
}

• 参数说明：
  • '../../public/'：要预加载的图片目录
  • false：是否递归遍历子目录
  • /\.(jpg|png|svg)$/：匹配图片文件的正则，可根据需要调整

2. 直接使用public目录的根路径（无需require）

如果图片放在public目录下，Vue项目打包后会将该目录的资源直接复制到dist根目录，因此可以直接用绝对根路径访问，无需require或相对路径拼接：

<v-img :src="`/${articles[0].photo}`" contain></v-img>

这也解释了你直接写<v-img src="../../public/Boisko.jpg">不显示的原因——打包后public目录的资源路径会变为根路径，原相对路径不再有效。

3. 校验文件名的准确性

确保articles[0].photo的值完全匹配图片文件名，包括大小写（Linux/macOS系统区分文件名大小写）、后缀（如.jpg不能写成.JPG），避免因文件名不匹配导致找不到资源。

补充说明 #

你之前硬编码require('../../public/Boisko.jpg')能正常工作，是因为Webpack可以静态识别这个完整路径，将图片作为资源模块处理并打包；而动态拼接的路径属于运行时变量，Webpack无法提前解析，因此无法找到对应的模块。

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