html - How to load image (and other assets) in Angular an project?

Question

I'm pretty new to Angular so I'm not sure the best practice to do this.

I used angular-cli and ng new some-project to generate a new app.

In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images

In app.component.html (which is the root of my application), I put

<img class="img-responsive" src="assets/images/myimage.png">

When I do ng serve to view my web application, the image does not display.

What is the best practice to load up images in an Angular application?

EDIT: See answer below. My actual image name was using spaces, which Angular did not like. When I removed the spaces in the file name, the image displayed correctly.

Answer 1

In my project I am using the following syntax in my app.component.html:

<img src="/assets/img/1.jpg" alt="image">

or

<img src='http://mruanova.com/img/1.jpg' alt='image'>

use [src] as a template expression when you are binding a property using interpolation:

<img [src]="imagePath" />

is the same as:

<img src={{imagePath}} />

Source: how to bind img src in angular 2 in ngFor?