无法在 vue 图像 src 绑定中使用波浪号 (~)答案

【问题标题】：Unable to use tilde (~) in vue image src binding无法在 vue 图像 src 绑定中使用波浪号 (~)
【发布时间】：2020-06-02 06:29:12
【问题描述】：

所以场景是，

我有一个包含测试图像名称的数组，我必须获取一个随机图像并绑定到我的图像标签，我使用的代码是：

export default {
    data() {
        return {
            images: ['test-1.png', 'test-2.png', 'test-3.png'],
        }
    },
    methods: {
        randomItem (items) {
            return items[Math.floor(Math.random()*items.length)];   
        }
    },
    created() {
        this.selectedImage = '~/assets/images/' + this.randomItem(this.images);
  }

在我的模板中，我将其添加为：

<img :src="selectedImage"/>

我在浏览器上的输出呈现为：

<img data-v-658aaa7e="" src="~/assets/images/test-1.png">

我希望它占据完整的路径。

【问题讨论】：

标签： javascript vue.js data-binding vue-component nuxt.js

【解决方案1】：

路径需要用require解析：

this.selectedImage = require('~/assets/images/' + this.randomItem(this.images));

这是由vue-loader 在模板中自动完成的，这就是它在没有require 的情况下工作的原因。

demo

【讨论】：