Vue中使用require动态引入props传入的图片路径报错如何解决？

报错原因 #

require是webpack编译期执行的方法，运行时传入全量动态路径时，webpack无法提前识别要打包的资源，所以会抛出找不到模块的错误。

解决方案 #

方案1：父组件传值时直接完成资源引入

调用CTA组件时，直接把require处理后的结果传给icon参数，组件内不需要额外处理：

<!-- 父组件调用代码 -->
<CTA type="primary" :icon="require('~/assets/phone/img/icons/share.svg')" icon-alt="share">
  Primary CTA
</CTA>

组件内直接使用ctaIcon作为src即可：

<img :src="ctaIcon" />

该方案适配性最高，不需要限制资源存放路径，也不需要修改组件内部逻辑。

方案2：组件内拼接固定路径前缀

如果要求父组件只传文件名/后缀路径，可以把资源存放的固定前缀抽到组件内部，require时动态拼接路径：

<!-- 父组件调用代码，仅传文件名 -->
<CTA type="primary" icon="share.svg" icon-alt="share">
  Primary CTA
</CTA>

组件模板内拼接路径引入：

<img :src="require(`~/assets/phone/img/icons/${ctaIcon}`)" />

注意：这里的路径前缀必须是写死的字符串，不能用变量替代，否则webpack还是无法识别资源

方案3（Vite打包场景适用）

如果项目是基于Vite构建，不再支持require语法，可以用new URL方式处理动态资源：

<img :src="new URL(`../assets/phone/img/icons/${ctaIcon}`, import.meta.url).href" />

内容的提问来源于stack exchange，提问作者Théo Lavaux