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 — StackByMe
– StackByMe, Commented May 10, 2022 at 9:35

user459872 · Accepted Answer · 2022-05-10 09:34:51Z

1

You can use v-bind directive.

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

answered May 10, 2022 at 9:34

user459872

25.9k4 gold badges51 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mat Over a year ago

wow, that works was struggling with this for over an hour and its this simple, thanks

UserAerian · Accepted Answer · 2022-05-10 09:42:46Z

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, 2022 at 9:42

UserAerian

236 bronze badges

Collectives™ on Stack Overflow

Vue add variable to image src

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related