VueJS: создание динамического c sr c пути для Vuetify v-img - PullRequest
Новая
       50

VueJS: создание динамического c sr c пути для Vuetify v-img

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

Я использую v-for для отображения коллекции изображений, используя Vuetify v-img. Мы сохраняем только идентификатор изображения, который затем динамически вставляется в атрибут src v-img. Но динамическая вставка значения src не работает. image.title отображается, но ничего не отображается для v-img. Я попробовал несколько других ответов на SO, но ни один не работал. Кто-нибудь знает, как правильно это сделать? 

<v-card max-width="400" v-for="image in images" :key="image.sourceId">
  {{image.title}}
  <v-img
      src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
  </v-img>
</v-card>

export default {
  data: () => ({
    images: [
      {
        id: "2",
        sourceId: "bMwG1R3sXnE",
        title: "Sunrise"
      },
      {
         id: "3",
         sourceId: "pqrwG1R3sXnE",
         title: "Amazon Forest"
      }
    ]
})

1 Ответ

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

Что ж, привязка атрибута src заставила его работать, поэтому вместо src используйте :src

<v-card max-width="400" v-for="image in images" :key="image.sourceId">
  {{image.title}}
  <v-img
    :src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
  </v-img>
</v-card>
...