CODEWITHSUNDEEP
javascriptvue.js
Mat
Mat

Reputation: 733

Vue add variable to image src

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.

Upvotes: 0

Views: 861

Answers (2)

UserAerian
UserAerian

Reputation: 23

Like this:

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

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

Upvotes: 1

user459872
user459872

Reputation: 24877

You can use v-bind directive.

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

Upvotes: 1

Related Questions