cannot show my pictures stored in folder using v-for vuejs-CodePudding

I am new to Vuejs. I have two pictures store in my website. the v-for allocated the information correctly inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png

The html comes with vue2, and I want to use the v-for with {{}} to show each pictures, This is html code.

     <tr v-for="show_all_item in databaseListItem">
        <!--first attempt, required not declared-->
        <!-- <img :src="require(`@/htdocs/products_db/stored_images/${show_all_item.itemimage}`)" />     -->

        <!--second attempt, itemimage not decalred-->
        <!-- <img :src="`/products_db/stored_images/${show_all_item.itemimage}`"> -->
        <!--wrong--> 
        <img :src="{{show_all_item.itemimage}}" />

 
        <td scope="row">[Name]</td>
        <td scope="row">[Code]</td>
        <td scope="row">[Spec]</td>
        <td scope="row">[Spec]</td>
    </tr>

databaseListItem is sorted in myjs with vue. So it already has the named in inputt_item.itemimage (cms.png) correctly.

new Vue({
el: "#app",
data() {
  return {
    databaseListItem: [],
    inputt_item: {itemname: "", itemcode: "", itemdescription: "", itemvariant: "", 

      itemimage: "", itemts: ""}, //itemimage stored the name of the image ex. cms.png

    selected: {}
  };
},

Both of the attempt are not correct, how can I only using v-for and show the correct path for the image I stored? I try to use img tag and v-img, but still nothing shown? Any problem with my code? Any help would appreciate.

CodePudding user response：

Give a try to

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

As shown here: https://stackoverflow.com/a/57567343/8816585

Also, keep in mind that the mustache syntax (aka {{ }}) is only for actual text, not for HTML attributes.

PS: assuming that you properly do have cms.png in itemimage.