Angular run npm start not show image

Question

I am reading https://angular.io/guide/template-syntax#template-syntax .

I download https://angular.io/generated/zips/template-syntax/template-syntax.zip

Notable points

In app.component.html

<h3>
  {{title}}
  <img src="{{heroImageUrl}}" style="height:30px">
</h3>

In app.component.ts

heroImageUrl = 'assets/images/hero.png';

then run

npm i @angular/cli
npm i
npm start

Go to http://localhost:4200/

How to fix it?

Answer 1

In the app.component.ts you need to have a variable called heroImageUrl

As in your app.component.html you have the following line:

<img src="{{heroImageUrl}}" style="height:30px">

Edit as @Joel Joseph pointed it should be: [src] not src

<img [src]="heroImageUrl" style="height:30px">

I see that in the app.component.ts there is a variable commented:

  // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';