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

Question

I am trying to concatenate 'assets' and to bind prod.productFileName to v-img :src

this works: <v-img :src="@/assets/abc.png" />

but I cannot do this: <v-img :src="@/assets/prod.productFileName" />

So I was trying to concatenate from the forEach bellow:

How can I do it?

<div v-for="prod in products" :key="prod.id">
  <v-img :src="prod.productFileName" />


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

           this.products.forEach(prod => {                         
             prod.productFileName = `@/assets/${prod.productFileName}`  // <--- I am getting an error
          });
        })         
    }
}

Please create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [codesandbox.io](https://codesandbox.io/s/vue) to show the issue happening. — palaѕн, Jul 07 '20 at 12:52
try this method: https://stackoverflow.com/a/40493036/12397250 — Owl, Jul 07 '20 at 13:03

score 0 · Answer 1 · answered Jul 07 '20 at 12:58

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

score -1 · Answer 2 · answered Jul 07 '20 at 12:57

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

answered Jul 07 '20 at 12:57

Stark Buttowski

1,799
2
10
21

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

2 Answers2