CODEWITHSUNDEEP
imagevue.jsvuejs2vuetify.jsnuxt.js
Meena Chaudhary
Meena Chaudhary

Reputation: 10665

VueJS: Building dynamic src path for Vuetify v-img

I am using v-for to display collection of images using Vuetify v-img. We only store the image's Id which is then dynamically inserted into the src attribute of v-img. But dynamically inserting src value is not working. image.title is displayed but nothing is displayed for v-img. I have tried few other answers on SO but none worked. Does anybody know what is the correct way to do this?

<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"
      }
    ]
})

Upvotes: 1

Views: 2159

Answers (1)

Meena Chaudhary
Meena Chaudhary

Reputation: 10665

Well, binding the src attribute made it work so instead of src use :src

  <v-img
    :src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
  </v-img>

or

  <v-img
    :src="`https://img.imagestore.com/image/${image.sourceId}.jpg`">
  </v-img>

Upvotes: 1

Related Questions