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

Issue

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" />

Solution

Try this

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

Answered By - Luís Filipe Vaz