Почему в не отражается картинка, при использовании VUE.JS?

Использую vue cli. Задача выводить изображение, имя файла которого указано в data свойствах компонента.
data: function () {
		return {
			result: {
				price: '',
				show: false,
				title: '',
				img: 'schiedel-uni-two-pipe.jpg'
			}
				
		}
	},

В шаблоне компонента для вывода картинки
<div class="uni_result-wrap-img">
	<img v-bind:src="'./../assets/img/' + result.img" v-bind:alt="'Комплект ' + result.title" class="uni_result-img">
</div>

Однако, в результате в браузере изображение не отражается.
5d39a6fc96f14716216275.jpeg

При этом в консоли браузера видно, что путь к файлу правильный,
5d39a5d02cbf8548077920.jpeg

Если этот путь прописать в коде на прямую, без использования VUE.JS - картинка отображается.

В связи с чем может возникать данная проблема? Как решить проблему?
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
potapchino
@potapchino
<img :src="imgUrl" :alt="imgAlt" class="uni_result-img">


computed: {
  imgUrl() {
    return require(`@/assets/img/${this.result.img}`)
  },
  imgAlt() {
    return `Комплект ${this.result.title}`)
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы