Vue.js 2基于API响应动态加载本地assets图片到b-img组件的报错问题

你配置的transformAssetUrls规则有明确的作用边界：

• 这套规则只在模板编译阶段生效，专门处理模板里静态写死的属性值，会把静态写的相对路径自动替换为webpack可识别的require()引用，走正常的资源打包流程
• 动态绑定的:src是运行时才会拿到值的JS表达式，vue-loader在编译阶段根本没法识别表达式内部的字符串内容，自然不会触发对应的资源模块加载逻辑，直接抛出找不到模块的错误
• 硬编码路径能正常显示，正是因为完全适配了这套静态解析的规则

方案1：本地建立资源映射（无需改动现有接口返回格式） #

利用webpack的require.context能力，批量预加载指定目录下的目标图片，建立文件名与可访问资源路径的映射，完全适配动态绑定场景：

1. 在plan.vue的script模块中，批量导入插画目录下的所有svg资源

// 批量加载illustration目录下的所有svg文件
const illustrationLoader = require.context(
  // 相对于当前plan.vue的资源路径（src/views/user/ 向上退两级到src目录，再定位到目标资源文件夹）
  '../../assets/images/illustration',
  false, // 不递归遍历子目录
  /\.svg$/ // 仅匹配后缀为svg的文件
)
// 生成映射表：key为图片文件名，value为经webpack处理后可直接使用的资源路径
const imgMap = {}
illustrationLoader.keys().forEach(filePath => {
  const fileName = filePath.replace(/^\.\//, '')
  imgMap[fileName] = illustrationLoader(filePath)
})

2. 新增路径转换方法，兼容现有接口的返回格式

methods: {
  resolvePlanImg(imgPath) {
    // 从接口返回的完整相对路径中提取最后一段的文件名做匹配，不用修改接口返回的路径格式
    const targetImgName = imgPath.split('/').pop()
    return imgMap[targetImgName]
  }
}

3. 调整模板内的动态绑定逻辑

<b-img
  :src="resolvePlanImg(plan.img)"
  class="mb-2 mt-5"
  alt="basic svg img"
/>

方案2：将动态加载的资源迁移至public目录 #

如果项目没有强制要求资源必须走模块化打包流程，可将所有需要动态引用的计划图片迁移到public/images/illustration/路径下：

• public目录下的资源不会经过webpack编译处理，会被直接拷贝到最终打包产物的对应目录，引用路径为基于站点publicPath的绝对路径
• 后续接口返回的图片路径直接写为/images/illustration/Pot3.svg格式，动态绑定时可直接赋值给:src使用，无需额外的路径转换

• 不要直接写require(plan.img)这类依赖纯变量的require逻辑，webpack无法对动态传入的变量路径做静态依赖分析，依然会抛出模块找不到的错误
• 使用require.context批量加载资源时，要严格限定文件匹配范围，避免打包时引入不必要的资源，增大最终产物体积

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