How to load image (and other assets) in Angular 2

问题:

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.

回答1:

I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png worked.

回答2:

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?

回答3:

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

回答4:

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.

回答5:

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

回答6:

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