Vuejs image src динамическая загрузка не работает
Я только начал использовать Vue.js и Vue CLI, и у меня возникла проблема, я не понимаю, почему я не могу динамически установить изображение из области видимости, но я могу сделать это, записав его непосредственно в HTML, obj.img это строка с @/assets/logo.png
значение тоже. У меня есть тайм-аут при фальсификации вызова ajax, но браузер не может правильно разрешить маршруты для изображения.
<div slot="media">
<img :src="obj.img"> <!-- http://localhost:8080/@/assets/logo.png -->
<img src="@/assets/logo.png"> <!-- http://localhost:8080/img/logo.82b9c7a5.png -->
</div>
Кроме того, почему маршруты разные? Есть идеи?
2 ответа
Решение
Таким образом, реальное исправление будет следующим:
:src="getImage(obj.img)"
getImage(path) {
return require(path)
}
Вы можете прочитать больше об этом в ответе Эвана, создателя Vue.
Хороший!
Как показал @Ohgodwhy, Vue не получает путь к изображению напрямую.
Вот как можно установить источник изображения:
<v-img max-height="150" max-width="250" :src="getImage()"></v-img>
а затем в методах вам нужно:
methods: {
getImage() {
return require("./logo.png");
},
},
И это сделано! Я новичок и у меня много дел.