Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

enter image description here

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

     <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.

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading