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

Question

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.

Also, if you're using Webpack and want to load dynamic images: https://stackoverflow.com/a/57567343/8816585 — kissu, Dec 14 '22 at 11:26
kissu, thanks but I tried it said itemimage not declared, I suppose declared on js : ( — Noizy Z, Dec 14 '22 at 11:29
If you have some difficulties with having it properly displayed when the path is dynamic, focus on having a hardcoded image first. `/opt` is probably not the good path to have here, you should be referencing something in your Vue project. — kissu, Dec 14 '22 at 11:32
`/opt` is clearly "above" your Vue project, so you'll need to copy your assets there because Webpack has no idea what those files are (even if on your system). Mind sharing the structure of your project? — kissu, Dec 14 '22 at 11:33
yes kissu you are right, the path is "too detail" and it makes does not return the image I want, now ` ` is the most correct if I only need same picture shown again and again. — Noizy Z, Dec 14 '22 at 11:36
yes, `stored_images/cms.png` works. but when I try `src="stored_images/{{show_all_item.itemimage}}` and it has error again : ( — Noizy Z, Dec 14 '22 at 11:38
```:src="`stored_images/${show_all_item.itemimage}` ``` it should be, `{{ }}` syntax is only for actual text. — kissu, Dec 14 '22 at 11:40
Haha, might happen sooner than you expect. Is your issue solved buddy? — kissu, Dec 14 '22 at 11:48
really really solved, thanks kissu, let's conencted sometimes. — Noizy Z, Dec 14 '22 at 11:56

score 0 · Accepted Answer · answered Dec 14 '22 at 11:41

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.

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

1 Answers1