Vue3中require动态加载JSON图片路径报错，求解决方案

问题原因 #

Webpack 处理 require 动态路径时，必须保留一段静态路径前缀来确定要打包的资源范围。当你完全通过 JSON 数据拼接出完整路径时，Webpack 无法在构建阶段预判需要打包的文件，导致运行时抛出模块找不到的错误。

你之前用 require(@/assets/images/fulls/0${uid}.jpg) 能正常工作，是因为路径前缀 @/assets/images/fulls/ 是静态的，Webpack 会自动打包该目录下所有 .jpg 文件，运行时就能正确解析动态拼接的文件名。

解决方案 #

方案一：修改 JSON 数据结构 #

将 JSON 中的路径简化为仅保留文件名，代码中拼接静态前缀：

修改后的 JSON：

{
  "full": "01.jpg",
  "pathUrl": "01.jpg"
}

对应代码：

created: function() {
  // ...
  arr.forEach(imgItor => {
    let newObj = { id: 0, full: '', pathUrl: '', descript: 'Lorem ipsum'};
    newObj.id = uid++;
    newObj.full = require(`@/assets/images/fulls/${imgItor.full}`);
    newObj.pathUrl = require(`@/assets/images/thumbs/${imgItor.pathUrl}`);
    // ...
  });
}

方案二：从原有路径提取文件名（不修改 JSON） #

若无法修改 JSON，可通过字符串处理提取文件名，再拼接静态前缀：

created: function() {
  // ...
  arr.forEach(imgItor => {
    let newObj = { id: 0, full: '', pathUrl: '', descript: 'Lorem ipsum'};
    newObj.id = uid++;
    
    // 提取 full 路径的文件名
    const fullFileName = imgItor.full.split('/').pop();
    newObj.full = require(`@/assets/images/fulls/${fullFileName}`);
    
    // 提取 pathUrl 路径的文件名
    const thumbFileName = imgItor.pathUrl.split('/').pop();
    newObj.pathUrl = require(`@/assets/images/thumbs/${thumbFileName}`);
    
    // ...
  });
}

关键知识点 #

• Webpack 对动态 require 的解析依赖静态路径片段，它会根据静态前缀扫描对应目录下的所有匹配文件并打包。
• 完全动态的路径（无任何静态前缀）会导致 Webpack 无法提前打包资源，运行时自然找不到模块。

内容的提问来源于stack exchange，提问作者하마아저씨