CODEWITHSUNDEEP
vue.js
Eyal
Eyal

Reputation: 4773

Bind an image-src from array of objects

How can I bind the prod.src?

<v-row>
    <v-col v-for="prod in products" :key="prod.id" cols="12" md="6" lg="3">

          <v-btn outline block class="primary">{{prod.id}}</v-btn>                   
          <img :src="require(`${prod.src}`)" />     <!-- I was trying this -->

    </v-col>        
</v-row>

<script>
   export default {
      data: () => ({
        products: [         
           { id: 1112, src: "https://freeimage1.jpg" },        
           { id: 1113, src: "https://freeimage2.jpg" },   
         ]
     }),    
  };
</script>

Chrome console shows an error: Cannot find module 'https://freeimage1.jpg'

Upvotes: 1

Views: 371

Answers (1)

Ilijanovic
Ilijanovic

Reputation: 14904

You bind it wrong.

Change this line: 

<img :src="require(`${prod.src}`)" />

To this:

<img :src="prod.src" />

Upvotes: 1

Related Questions