Coder Perfect

In an Angular project, how do you load a picture (and other assets)?


I’m new to Angular, so I’m not sure what the optimal approach is.

To create a new app, I used angular-cli and ng new some-project.

In the “assets” folder, it generated a “images” folder, thus my images folder is now src/assets/images.

I put the following code in app.component.html (which is the root of my program).

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

The image does not appear when I use ng serve to visit my web application.

In an Angular application, what is the best way to load images?

EDIT: Please see the response below. My original picture name included spaces in it, which Angular didn’t like. The image displayed correctly when I deleted the spaces from the file name.

Asked by user3183717

Solution #1

In my project’s app.component.html, I use the following syntax:

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


<img src='' alt='image'>

When binding a property with interpolation, use [src] as a template expression:

<img [src]="imagePath" />

is equivalent to:

<img src={{imagePath}} />

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

Answered by mruanova

Solution #2

It was fixed by me. My actual image file name had spaces in it, which Angular didn’t like for some reason. When I removed the spaces from my file name, assets/images/myimage.png worked.

Answered by user3183717

Solution #3

By default, Angular-cli includes the assets folder in the build options. When the names of my photographs had spaces or dashes, I encountered this problem. Consider the following scenario:

This line of code should work in your templates if you put the image in the assets/img folder:

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

If the problem persists, double-check your Angular-cli configuration file and make sure your assets folder is listed in the build options.

Answered by jmuhire

Solution #4

We may bind image paths using property binding in Angular2 to 5, as shown below. The single quote marks enclose the image path.

Sample example


Answered by Bhuwan Maharjan

Solution #5

1. Place this line at the top of the component.

declare var require: any

2. In your component class, add this line.

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

Answered by Bheem Singh

Post is based on