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

html angular angular-cli
user3183717 picture user3183717 · Mar 14, 2017 · Viewed 295.9k times · Source

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.

Answer

user3183717 picture user3183717 · Mar 14, 2017

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.

Related questions

Difference between tsconfig.json and tsconfig.app.json files in Angular

I'm a newbie in Angular. I used angular-cli to learn about angular and I found the files tsconfig.json and tsconfig.app.json. Both of these are typescript related and I found this link useful. But why two such files …

Read More
(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More
Binding select element to object in Angular

I'd like to bind a select element to a list of objects -- which is easy enough: @Component({ selector: 'myApp', template: `<h1>My Application</h1> <select [(ngModel)]="selectedValue"> <option *ngFor="#c of countries" …

Read More