'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.

javascript vue.js

Solution 1:^[1]

You can use v-bind directive.

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

Solution 2:^[2]

Like this:

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Abdul Niyas P M
Solution 2	UserAerian

'Vue add variable to image src

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]