vue需要动态图片

Question

我创建了这个 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'

如何让它正常工作？

Answer 1

您可以使用 acomputed property来校准 asset 的 url，如下所示：

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

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

<img :src="mIconURL" />

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

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