[Vuejs]-Vue.js : concatenate path and than bind to v-img

by

0👍

what you can do is store the response in this.products and no extra step is needed then in the img tag you can do is use template literals directly on the :src binding something like this

<div v-for="prod in products" :key="prod.id">
  <v-img :src="`/assets/${prod.productFileName}`" />


<script>
methods: {
   getProducts() {
      axios.get("https://localhost:44397/api/Product/List")
        .then(res => {
            this.products = res.data;
        })         
    }
}

and make sure that image is located in that location, otherwise the image will not be displayed

-1👍

You have change your code like below.

this.products.forEach(prod => {                         
   prod.productFileName = '/Uploads/' + prod.productFileName
});

Since this is a script you can simply append the string.

Leave a comment