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

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.

This question is related to html angular angular-cli

The answer is


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.


It is always dependent on where is your html file that refers to the path of the static resource (in this case the image).

Example A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

As you can see, yourpage.html is one folder away from the root (src folder), for this reason it needs one amount of ../ to go back to the root then you can walk to the image from root:

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

Example B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Here you have to go u in the tree by 2 folders:

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

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


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?


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");
  1. add this 'imgname' in img src tag on html page.

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


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


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

Some web servers like IIS don't have problem with that, if angular application is hosted in IIS, case sensitive is not a problem.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to angular-cli

Why powershell does not run Angular commands? ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found Could not find module "@angular-devkit/build-angular" How to remove package using Angular CLI? How to set environment via `ng serve` in Angular 6 Error: Local workspace file ('angular.json') could not be found How do I deal with installing peer dependencies in Angular CLI? How to iterate using ngFor loop Map containing key as string and values as map iteration how to format date in Component of angular 5