Problem
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">
or
<img src='http://mruanova.com/img/1.jpg' 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 https://stackoverflow.com/questions/42793292/how-to-load-image-and-other-assets-in-angular-an-project