Vue add variable to image src-CodePudding

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.

CodePudding user response：

You can use v-bind directive.

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

CodePudding user response：

Like this:

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

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