Отображать изображения с помощью v-for в Vue / Vuetify - PullRequest
Новая
       46

Отображать изображения с помощью v-for в Vue / Vuetify

0 голосов
/ 10 марта 2020

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

<v-row>
  <v-col v-for="(n, i) in footerLogos" :key="i">
    <v-img :src="`${n}`"></v-img>
  </v-col>
</v-row>

Массив: 

footerLogos: [
        "@/assets/inc5000.jpg",
        "@/assets/inc-honor-roll.jpg",
        "@/assets/asa.jpg",
        "@/assets/soaringeagle.jpg",
        "@/assets/inahu.jpg",
        "@/assets/nahu-eagle.jpg",
        "@/assets/inc5000.jpg"
      ]

Мне это ДОЛЖНО работать, но это не так т. Что мне не хватает? Или есть лучший / более простой способ сделать это? Я пробовал несколько вариантов, таких как пути "@assets / ...." против "@ / assets / ...", но, похоже, ничего не работает. Конечно, я упускаю что-то простое. Пожалуйста помоги! :)

Я использую Vue, Vuetify и Nuxt

Ответы [ 2 ]

3 голосов
/ 11 марта 2020

Если вам нужно импортировать какое-либо изображение из вашей файловой системы, сначала вам нужно импортировать этот файл с функцией require. Пожалуйста, взгляните на код ниже ... 

footerLogos: [
        require('~/assets/inc5000.jpg'),
        require('~/assets/inc-honor-roll.jpg'),
        require('~/assets//assets/asa.jpg'),
        require('~/assets/soaringeagle.jpg'),
        require('~/assets/inahu.jpg'),
        require('~/assets/nahu-eagle.jpg'),
        require('~/assets/inc5000.jpg')
      ]

Однако, если вы будете использовать imagem с какого-то URL-адреса, что-то вроде (https://example.com/img01.png) вам не подходит не нужно использовать требовать, просто используйте правильный путь, и это будет работать правильно.

1 голос
/ 10 марта 2020

Попробуйте этот код: 

<v-row>
  <v-col v-for="(n, i) in footerLogos" :key="i">
    <v-img :src="require(`${n}`)"></v-img>
  </v-col>
</v-row>

footerLogos: [
        "./assets/inc5000.jpg",
        "./assets/inc-honor-roll.jpg",
        "./assets/asa.jpg",
        "./assets/soaringeagle.jpg",
        "./assets/inahu.jpg",
        "./assets/nahu-eagle.jpg",
        "./assets/inc5000.jpg"
      ]

У меня не получилось с @

...