Angular 5 images not loading from assets directory

Question

I'm trying to load images from the assets directory but they do not load in the view. This is what's happening;

In assets directory I have a bunch of sub folders with images in the subfolders (icons and flags for instance)

In the view I have the image paths as

<img src="assets/img/flags/jp.png" alt=""> and <img src="assets/img/icons/copyright.png" alt="">

The Errors.

The image doesn't load in the view yet for a weird reason, the image in icons dir loads just fine.

When I inspect, this is what I discovered the following network call which is looking for the image from the root instead of assets.

Second, it says type is text/html instead of png and the initiator as VM639:330?!

However when I scroll further up, I discover the image had earlier been loaded just fine and the type and initiator are perfectly fine (png and index).

What exactly is going wrong here? Why can't I load images from the assets directory?

So for every image in your asset folder it's working fine except for the flags? Can you double-check that there's not reference to the flags other than assets/img/, so not starting with a /? A comment on the "type": Because there is no file at /img/flags/jp.png the angular-cli dev server responds with the homepage by default. This is a text/html file, so this is ok. — Capricorn
– Capricorn, Commented Jun 13, 2018 at 15:50
Thanks, this was actually the solution - I searched the entire project to discover a js script was responsible for resetting the paths. You could answer the question so I can select it as the answer — Clint_A
– Clint_A, Commented Jun 13, 2018 at 18:18
Not sure whether that's actually a "problem" for Stackoverflow then, as the problem only occurred because of a typo... — Capricorn
– Capricorn, Commented Jun 14, 2018 at 17:53

MNF · Accepted Answer · 2018-08-30 09:13:56Z

1

I have the same issue, image or icon in assets/image can not be displayed (404 not found). To resolve this I defined a variables like this in my component.ts

img = require('../../../../assets/images/excel.png')

the number of point depends on template place in the source folder. in the template I opt for this

 <img  [src]="img"/>

Note: This is not the best solution, i am looking for one better.

answered Aug 30, 2018 at 9:13

MNF

72710 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 images not loading from assets directory

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related