Vue add variable to image src

Question

this might be a stupid question but i cant figure out how to put in a variable into an image url in Vue. this is the code:

app.component("summoner-details", {
  template: `
    <div>
    <h1>{{name}}</h1>
    <img height='100' width='100' src="{{summonericon}}" alt='icon'/>
    <p>{{level}}</p>
    <p>{{summonericon}}</p>
    </div>
    `,
  props: ["name", "level", "summonericon"],
}),
  app.mount("#app");

The {{}} and ${} method doesnt work. Anyone know how i would go about doing this. Thanks in advance.

Does this answer your question? [vuejs variable in html attribute](https://stackoverflow.com/questions/41289941/vuejs-variable-in-html-attribute) — Reyno, May 10 '22 at 09:35

score 1 · Accepted Answer · answered May 10 '22 at 09:34

1

You can use v-bind directive.

<img height='100' width='100' v-bind:src="summonericon" alt='icon'/>

answered May 10 '22 at 09:34

Abdul Niyas P M

18,035
2
25
46

wow, that works was struggling with this for over an hour and its this simple, thanks – Mat May 10 '22 at 09:39

score 1 · Answer 2 · answered May 10 '22 at 09:42

1

Like this:

<img height='100' width='100' :src="summonericon" alt='icon'/>

Maybe duplicate with How can I use 'img src' in Vue.js?

answered May 10 '22 at 09:42

UserAerian

13
4

Vue add variable to image src

2 Answers2