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

Answer 1

Being specific to Angular2 to 5, we can bind image path using property binding as below. Image path is enclosed by the single quotation marks.

Sample example

<img [src]="'assets/img/klogo.png'" alt="image">

Answer 2

Normally "app" is the root of your application -- have you tried app/path/to/assets/img.png?

Answer 3

Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes. For example :

• 'my-image-name.png' should be 'myImageName.png'
• 'my image name.png' should be 'myImageName.png'

If you put the image in the assets/img folder, then this line of code should work in your templates :

<img alt="My image name" src="./assets/img/myImageName.png">

If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.

Answer 4

1 . Add this line on top in component.

declare var require: any

2 . add this line in your component class.

imgname= require("../images/imgname.png");

3. add this 'imgname' in img src tag on html page.

   <img src={{imgname}} alt="">

Answer 5

for me "I" was capital in "Images". which also angular-cli didn't like. so it is also case sensitive.

Answer 6

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?