Bind an image-src from array of objects

Question

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'

if the images are accessible through web then it's simply what @Ifaruki stated — Frnak
– Frnak, Commented Jun 2, 2020 at 13:05

Ilijanovic · Accepted Answer · 2020-06-02 13:07:14Z

1

You bind it wrong.

Change this line:

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

To this:

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

answered Jun 2, 2020 at 13:07

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Bind an image-src from array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related