-1

I am trying to perform concatenation in img tag and here below is what i am trying to do:

<div class="vx-row"> 
  <div v-for="item in items" class="vx-col" v-bind:key="item.id">
    <div class="w-full mb-base">
      <vx-card>
        ...
        <img :src="require('./img/stars_' + item.id + '_logo.png')" alt=""/>
        ... 
      </vx-card>
    </div>
  </div>
</div>

I am trying to concatenate the item.id to the image path as i am making my code dynamic such that when the cards are displayed then the respective image is displayed.

Please let me know how it can be done, initially i could see images in respective cards but then i tried using

<img :src="require(`./img/stars_${this.$route.params.item_id}_logo.png`)">

in other components then i get error every where.

Here is the error that i get everywhere:

enter image description here

app_er
  • 87
  • 10

2 Answers2

2

Here you can try a shorthand that webpack will use.

HTML:

    <img :src="getByPath(item.id)" v-bind:alt="item.id">

Method:

getByPath(id) {
    return require('./img/stars_' + id + '_logo.png')
}
app_er
  • 87
  • 10
LastM4N
  • 1,890
  • 1
  • 16
  • 22
  • Not working, image is broken in every cards, is there any other way – app_er Jan 14 '21 at 15:47
  • Are u sure that the path is correct ? The current oath says that go and search the image from the current position and then go inside img – LastM4N Jan 14 '21 at 15:50
  • yes, the path is correct, if i just hard code it by replacing the item.id then the image is displayed. But rather i want to make it dynamic – app_er Jan 14 '21 at 15:59
  • try with double quotes instead of single quotes – LastM4N Jan 14 '21 at 16:13
  • Nope it does not work as i have used the shorthand. – app_er Jan 14 '21 at 16:18
  • well strange..leaving this stackoverflow answers here that might help https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working – LastM4N Jan 14 '21 at 16:22
  • Thanks a lot it is working now! I found an answer in the link you sent me. – app_er Jan 14 '21 at 17:22
  • Nice! If you want send me the solution here to update my post and if you want to just take back the down vote :) – LastM4N Jan 14 '21 at 17:30
  • Sure i was about to tell you, shall i send you the answer, or shall i edit your answer ? – app_er Jan 14 '21 at 17:33
  • https://stackoverflow.com/a/47480286/14882601 this is the answer that helped me. You update your answer here. – app_er Jan 14 '21 at 17:37
  • If you can edit it go for it otherwise send here the answer and I will update it – LastM4N Jan 14 '21 at 17:38
1

you can do with method like below code try this:

<div class="vx-row"> 
  <div v-for="item in items" class="vx-col" v-bind:key="item.id">
    <div class="w-full mb-base">
      <vx-card>
        ...
        <img :src="getImgUrl(item.id)" alt=""/>
        ... 
      </vx-card>
    </div>
  </div>
</div>

and create method:

getImgUrl(value) {
     return `./img/stars_${value}_logo.png`
},
Parth Parekh
  • 146
  • 6