Vue需要动态图像答案

【问题标题】：Vue require dynamic imageVue需要动态图像
【发布时间】：2021-10-10 09:38:58
【问题描述】：

我已经创建了这个 Vue 组件并传递了一个图标路径。

<CTA type="primary" icon="~/assets/phone/img/icons/share.svg" icon-alt="share">
  Primary CTA
</CTA>

我的设置方法返回以下内容

setup(props) {
  return {
   ctaIcon: props.icon,
  }
},

所以ctaIcon 等于~/assets/phone/img/icons/share.svg。

当我尝试在模板中使用 ctaIcon 时，这有效

<img :src="require('~/assets/phone/img/icons/share.svg')" />

但这不起作用

<img :src="require(ctaIcon)" />

我收到以下错误Cannot find module '~/assets/phone/img/icons/share.svg'

如何让它正常工作？

【问题讨论】：

尝试here 解决方案
如前所述，请努力快速搜索。
这能回答你的问题吗？ How to load a dynamic path in my image tag in Nuxt?
不是真的，因为我想将图像的完整路径作为道具传递，而只是 require 整个道具但它不起作用，我最终遵循了 Salivino 的建议，创建了一个计算带有require(~assets/${props.icon}) 的属性并将phone/img/icons/share.svg 作为道具传递

标签： javascript vue.js nuxt.js

【解决方案1】：

您可以使用computed property 来校准资产的url，如下所示：

<script>
export default {
  props: ["ctaIcon"],
  computed: {
    mIconURL() {
      return require(`~/assets/icons/${this.ctaIcon}.png`);
    }
  }
};
</script>

然后在你的代码中你可以直接使用计算属性作为变量：

<img :src="mIconURL" />

如果您有多个图标需要解析其路径，您甚至可以创建一个method，而不是一个接受图标名称作为参数的computed property。然后可以将图标名称从标记级别动态传递给方法，如下所示：

<img :src="mIconURL(this.ctaIcon)" />

【讨论】：

问题是，我想将完整的图标路径作为道具传递（例如 icon="~/assets/phone/img/icons/share.svg"）以提供更大的灵活性。我已经尝试过这种方法const ctaIcon = computed(() => require(${props.icon}))，但它也不起作用。如果我不硬编码路径，为什么不工作？
如果你想传递完整路径，我建议在computed 属性中保留~/assets/ 常量，因为这不会改变对吧？ phone/img/icons/share.svg 等路径的其余部分可以插入到 computed 属性的字符串中。
可以准备img路径 const img = this.ctaIcon.split('/').slice(2, this.ctaIcon.length).join('/')) return require(@987654333 @);所以你可以通过完整的图标路径