本地JSON无法加载图片URL 使用require引入图片时报错如何解决

问题产生原因 #

require 是webpack等前端打包工具提供的静态资源导入方法，仅支持处理编译阶段就能确定的静态路径。你从JSON文件中读取到的图片路径属于运行时才能拿到的动态字符串，打包阶段打包工具无法解析这个动态字符串对应的实际资源位置，因此会抛出模块无法找到的报错。

可行解决办法 #

• 方法1：提前建立静态资源映射
  提前将所有需要用到的图片做静态引入，存为键值对映射，从JSON拿到图片文件名后直接从映射中取值即可，示例代码：

// 提前静态引入所有需要用到的图片
const imageMap = {
  'user-avatar.png': require('./assets/images/user-avatar.png'),
  'goods-cover.png': require('./assets/images/goods-cover.png')
}

// 业务逻辑中从JSON拿到文件名后取对应资源
const imgSrc = imageMap[jsonData.imgName]

• 方法2：使用public静态资源目录
  将所有需要动态引用的图片放到项目的public目录下（vue-cli、vite等主流脚手架项目默认支持该目录），JSON中只存储图片的文件名，使用时直接拼接绝对路径即可，不需要调用require：

// 假设图片放在public/images目录下
const imgSrc = `/images/${jsonData.imgName}`

• 方法3：vite环境用URL动态解析
  如果你的项目使用vite构建，可以用import.meta.url配合URL构造函数处理动态路径：

const getImageSrc = (imgName) => {
  return new URL(`./assets/images/${imgName}`, import.meta.url).href
}
const imgSrc = getImageSrc(jsonData.imgName)

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