Vue图像绑定将资产路径转换为字符串

Question

我一直在研究一些应将路径的一部分动态添加到路径的另一部分的代码。但是，Vue似乎认为：src路径是字符串而不是路径。

代码如下：

<img:src="'@/assets/images/' + this.params.img" >

this.params.img基本上是从我创建的模态内部添加第二部分的方法：

this.$modal.show('modal-newreminder', {
           title: this.$i18n.t('firstReminderTitle'),
           text: this.$i18n.t('firstReminderText'),
           img: 'onboarding/onboarding-2.svg'
        });

Chrome浏览器的检查元素屏幕截图：

[]

我也尝试过这样做：

<img :src=" require(`@/assets/images/${this.params.img}`) " /> 

但到目前为止没有运气

谢谢！

Answer 1

• 删除@标记。从项目的根目录开始路径。如果assets位于根目录中，则路径应为/assets/images/whatever.png。

• 您不应在模板内使用this上下文。直接指向params.img。