Why does a proprety call {{hero.name}} work in a <h> but not in a <img>

Question

In the template, the following code works normally:

<h3>{{hero.name}}</h3>

or even:

<a routerLink="/details/{{hero.id}}">{{hero.name}}</a>

But when it comes to the following image path:

<img [src]="'/pictures/{{hero.name}}' | getDownloadURL" />

It is interpreted as a string, as in the error message:

ERROR FirebaseError: Firebase Storage: Object 'pictures/{{hero.name}}' does not exist. (storage/object-not-found)

Even though the picture is accessible through:

<img [src]="'/pictures/mario' | getDownloadURL" />

Answer 1

Try this

<img [src]="'/pictures/' + hero.name | getDownloadURL" />

Answer 2

Use template strings in such cases: /pictures/${hero.name} | getDownloadURL

Answer 3

try to use `` quotes

"`/pictures/{{hero.name}} | getDownloadURL"