Vue не может найти динамический источник элемента vuetify v-img
Мне нужно загрузить изображение (из моей файловой системы, а не url) динамически с помощью vuetify. Однако, когда я связываю переменную path в элементе v-img, vue не может найти ее. Когда я ставлю его статически, используя "требуемый" метод, это нормально.
Как я могу выбрать динамический путь с помощью vuetify? Это проблема с загрузчиком файлов?
Я рассчитываю выбрать изображение во время выполнения динамически. Например, если у меня есть кнопка" Далее", я хочу загрузить следующее изображение. Вот код в Vue.JS
<html>
<v-img
v-bind:src="require(myPath)"
aspect-ratio="1.5"
max-height="500"
contain
/>
</html>
<script>
data: () => ({
mycount: 1,
myPath: "../myimages/2.png"
})
</script>
[Vue warn]: ошибка в визуализации: "ошибка: не удается найти модуль"../ myiamges / 2.png '" найдено в - - - > в src / App.вю-вю.время выполнения.радиоразведка.js: 619 Ошибка: "не удается найти модуль"../ imyimages / 2.png'" синхронизация компонентов webpackEmptyContext: 2 рендерить расписание игр.vue: 30 VueJS 21 запуск es6.обещать.js: 75 уведомить es6.обещать.js: 92 заподлицо _microtask.js: 18 вю.время выполнения.радиоразведка.js: 1888

Ответы - Vue не может найти динамический источник элемента vuetify v-img / Vue cannot find the dynamic source of the vuetify v-img element

28.06.2019 03:40:37
Попробуйте использовать вычисляемые свойства, что-то вроде:
<html>
<v-img
v-bind:src="require(imageSrc)"
aspect-ratio="1.5"
max-height="500"
contain
/>
</html>
<script>
data: () => ({
mycount: 1,
myPath: "../myimages/2.png"
}),
computed: {
imageSrc() {
return this.myPath;
}
}
</script>
Это сделает imageSrc динамической переменной, но вы сказали о нажатии кнопки "Далее", этот щелчок должен изменить значение "myPath", затем "imageSrc" изменится, и v-img получит это новое значение;


29.06.2019 02:41:18
После долгих поисков и попыток я нашел ответ на свой собственный вопрос.
Проблема здесь заключается в методе "require". Он должен знать папку, в которой находятся изображения, во время компиляции, когда я использую динамический путь. Смотри сюда . Таким образом, динамическое указание пути, включающего имя файла, не позволит методу "require" идентифицировать только папку. Это была интерпретация imy.
Поэтому я изменил код вот так, и это сработало для меня.:
<html>
<v-img
v-bind:src="require('../myimages/' + myFilename)"
aspect-ratio="1.5"
max-height="500"
contain
/>
</html>
<script>
data: () => ({
mycount: 1,
myFilename: "2.png"
})
</script>
В этом случае я мог изменить имя файла во время выполнения, и это тоже сработало.

28.01.2020 02:44:56
Ты тоже можешь это сделать:
<v-img
:src="`${image-variable}`">
</v-img>
Это сработало в Vuetify 1.5