Vue JS привязка данных не работает для IMG SRC - PullRequest
Новая
       30

Vue JS привязка данных не работает для IMG SRC

1 голос
/ 14 марта 2019

Я использую vue 2 и vue-cli 3. Я пытаюсь связать src тега с переменной в данных.

В частности, я делаю следующее: 

<img class="img-time-matters" :src="`./../assets/time-comparison-${locale}.png`">

export default {
   name: "home",
   components: {},  
   data() {
       return {
           locale: locale // 'en'
       };
   }
}

Обвязка работает

Используя инструменты разработчика Chrome и изучая сетевую активность, я вижу, что привязка работает:

http://localhost:8080/assets/time-comparison-en.png

Однако ресурс не найден.

Если я удалю привязку данных к жесткому коду, путь к курсу: 

<img class="img-time-matters" :src="`./../assets/time-comparison-en.png`">

Vue разрешает ссылку на ресурс для поиска изображения по адресу:

http://localhost:8080/img/time-comparison-en.74a6f0ca.png

Как получить привязку Vue к данным таким образом, чтобы она правильно разрешала привязку (т. Е. Time-сравнение-en.74a6f0ca.png).

Спасибо!

1 Ответ

3 голосов
/ 14 марта 2019

Пожалуйста, попробуйте require

<img class="img-time-matters" :src="require(`../assets/time-comparison-${locale}.png`)">
...