VueJS: Building dynamic src path for Vuetify v-img

Question

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

Meena Chaudhary · Accepted Answer · 2020-06-24 13:23:06Z

1

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>

edited Jun 24, 2020 at 13:23

answered Mar 4, 2020 at 7:35

Meena Chaudhary

10.8k16 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Perfectionist Over a year ago

Great! Any kind of binding you have to give :

Meena Chaudhary Over a year ago

this is shorthand for v-bind:src

Collectives™ on Stack Overflow

VueJS: Building dynamic src path for Vuetify v-img

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related