Vue中传入组件的图片地址无法显示，使用require也无效如何解决？

问题原因 #

webpack 中的require()属于编译期静态解析语法，仅能识别编译阶段可确定的静态路径，运行时传入完整的动态路径字符串时，webpack 无法提前匹配对应资源，因此会出现加载失败的问题。

修复方案 #

方案1：父组件提前处理资源引入（最推荐） #

直接在父组件传递参数时完成require引入，子组件不需要额外处理：
父组件代码修改为：

<product-card
:data="{cat: 'category', title: 'card title', src: require('~/static/1.png') }"
/>

子组件代码修改为：

<div>
  <img :src="data.src" class="ccard-right-img" alt="" />
</div>

方案2：子组件固定路径前缀，动态拼接文件名 #

如果需要统一在子组件处理资源引入，只需要将路径的固定部分写死在require中，仅动态传入文件名部分即可：
父组件代码修改为：

<product-card
:data="{cat: 'category', title: 'card title', src: '1.png' }"
/>

子组件代码修改为：

<div>
  <img :src="require(`~/static/${data.src}`)" class="ccard-right-img" alt="" />
</div>

额外可选方案 #

如果你的项目使用的是Nuxt2等默认将static目录资源暴露在服务根路径的框架，也可以直接用绝对路径访问静态资源，不需要使用require：
父组件传值src: '1.png'，子组件直接写：

<div>
  <img :src="`/${data.src}`" class="ccard-right-img" alt="" />
</div>

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