Vue не может найти динамический источник элемента vuetify v-img

Vue не может найти динамический источник элемента vuetify v-img

28.06.2019 02:21:18 Просмотров 32 Источник

Мне нужно загрузить изображение (из моей файловой системы, а не 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

javascript vue.js vuetify.js
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/56806020/vue-cannot-find-the-dynamic-source-of-the-vuetify-v-img-element#comment100181013_56806020
Когда я изменяю путь в url-адрес и удаляю метод require, он работает. Например: v-bind: src=myPath myPath: "vuejs.org/images/logo.png ",

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

Julliano Osorio

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 получит это новое значение;

Источник
https://stackoverflow.com/questions/56806020/vue-cannot-find-the-dynamic-source-of-the-vuetify-v-img-element/56807146#comment100180784_56807146
проблема все еще существует после внедрения вычисляемого свойства. Произошла та же ошибка. Вю.js каким-то образом интерпретирует динамический путь правильно, как говорит ошибка, но он все еще не может найти файл. С другой стороны, статический путь все еще работает.
Является ответом!
mizar

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>

В этом случае я мог изменить имя файла во время выполнения, и это тоже сработало.

Источник
edgar estrada

28.01.2020 02:44:56

Ты тоже можешь это сделать:

<v-img 
    :src="`${image-variable}`">
</v-img>

Это сработало в Vuetify 1.5

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X