Невозможно использовать тильду (~) в привязке vue image sr c - PullRequest
0 голосов
/ 18 февраля 2020

Сценарий таков:

У меня есть массив с именами тестовых изображений, я должен выбрать случайное изображение и привязать его к тегу изображения. Код, который я использовал:

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">

Я хочу, чтобы он занял полный путь .

1 Ответ

1 голос
/ 18 февраля 2020

Путь должен быть разрешен с помощью require:

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

Это автоматически выполняется в шаблоне с помощью vue-loader, поэтому он работает без require там.

демо

...