vue.js - Image not loading in vue js

Question

I am trying to reference an image to display in view but I can't get it right. This is the error I get "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'product.images[0].filename' is not a valid attribute name."

Please assist to reference an image in image2 path Here is my code:

 <div v-for="product in Products.data" :key="product.id" class="p-2">
             <div class="item p-2">{{product.id}}</div>
              <div class="item p-2">{{product.id}} Price:{{product.price}} </div>
              <div class="item p-2"><p>Loc:{{product.id}}</p></div>
                 <div class="item p-2"><p>fff:{{product.images[0].filename}}</p></div>

                 <img v-bind:src="'images2/'"+product.images[0].filename>
                 
             <div class="item p-2"> <a class="btn btn-primary btn-sm" :href="'/products/'+product.id">View</a>
             </div>
     
    </div> 

My problem is this line

                 <img v-bind:src="'images2/'"+product.images[0].filename>

question from:https://stackoverflow.com/questions/65948513/image-not-loading-in-vue-js

Answer 1

<img :src="'images2/'+product.images[0].filename">