Load image from database url

I have a table with attribut image, and i want to display it on my vuejs page.
My images are save in public\uploads\products, in the database i just save the file name like imageproduct.jpg.
This is the code im using <img v-bind:src="uploads\products\produit.image" class="imageproduit">, but it did not display anything.
Thank you for your help.

ps: im using Lavarel 8 and vuejs.

you need to write

as

<img v-bind:src="`uploads\products\${produit.image}`" class="imageproduit">

or use a computed property that returns this value in order to „expand“ your variable value.

1 Like

nothing display.
By the way how can i use a computed property that returns this value in order to „expand“ your variable value, im new in vuejs. Did you get some example or a tutorial where i can learn to compute property image.
Thank you

The thing with the “string in backticks (`)” are string literals. That is pure JavaScript. You might want to read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals.

More information on computed properties can be found in the Vue documentation https://vuejs.org/v2/guide/computed.html

You would use something like

computed: {
  imagePath() {
     return `uploads\products\${this.produit.image}`
  }
}

together with

<img v-bind:src="imagePath" class="imageproduit">

in your template.

1 Like

I tried the solution you offered me and still nothing, the image is not displayed. Here is the code for my entire page.

       <div
         class="col-lg-4 col-md-6 mb-4"
         v-for="produit in produits"
         :key="produit.id"
       >
         <div class="card h-100">
           <a href="#">
             <img v-bind:src="`uploads\products${produit.image}`" class="imageproduit">   
           </a>
           <div class="card-body">
             <h4 class="card-title">
               <a href="#">{{ produit.nom }}</a>
             </h4>
             <h5>{{ produit.prix }} FCFA</h5>
             <p class="card-text">{{ produit.description }}</p>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>
</template>

<script>
export default {
methods: {
 loadProduits: function () {
   axios
     .get("/api/produits")
     .then((response) => {
       this.produits = response.data.data;
       this.loading = false;
     })
     .catch(function (error) {
       console.log(error);
     });
 },
},
data() {
 return {
   produits: [],
 };
},
mounted() {
 this.loadProduits();
},
};

looks like you are missing a / after products. (Your browser’s console should give a 404 for the incorrect image path :wink:

Edit: and of course the path separators are wrong. You just copied my error. They should be / instead of \.

@fiedsch,
I corrected, as requested.
with

computed: {
  imagePath() {
     return `uploads/products/${this.produit.image}`
  }
}

the elements of the div do not display at all and console log returns
[Vue warn]: Error in render: "TypeError: can't access property "image", this.produit is undefined"
with

computed: {
  imagePath() {
     return "uploads/products/${this.produit.image}"
  }
}

the elements display and still does not display any image.

I took produit from your code and assumed it is in Vue’s data (hence this.produit).

In your original post you did not provide context that allows to see where produit (and its property image) comes from. But you should know :wink:

With your “correction” you simply removed accessing the variable this.produit.image and now return a static string. This way the error is gone but you still do not have a valid image path. You should see that in the generated code.

@fiedsch,
i got the mistake, it was a careless error, the real filename is produits and not products i use directly in the div this code :
<img :src="'/uploads/produits/'+produit.image" class="imageproduit">.

Thank you very much for your assistance.

thanks ,
<img v-bind:src="uploads\products${produit.image}" works for me
not work
** left side top quatos important**

for vuetify data-table this works too
<template v-slot:item.image="{ item }">
    <img v-bind:src="`/${item.image}`" style="width: 50px; height:50px"></v-img>
 </template>