Angular2: Cannot load assets folder images

Question

I have created a project from angular CLI, placed an image under assets folder. It works fine in localhost environment, but when deployed to github pages it's throwing 404.

After build --prod --base-href "my-project"

Base href is changed in index.html of dist directory.

 <base href="my-project">

After deploying to github page it couldn't find the image.

GET https://srk.github.io/assets/srk-favicon.ico 404 (Not Found)

I guess the URL should be https://srk.github.io/my-project/assets/srk-favicon.ico

You aren't actually asking a question... You're just stating facts — Gab, Mar 15 '17 at 04:23
i think the path is wrong. in my project i have placed like ../app/assets/demo.png app the main folder. so place the src link from main folder — Nunna Suma, Mar 15 '17 at 04:28
Possible duplicate of [angular2 base url and relative paths on gh-pages](http://stackoverflow.com/questions/39051959/angular2-base-url-and-relative-paths-on-gh-pages) — Gab, Mar 15 '17 at 04:28

score 5 · Answer 1 · answered Mar 15 '17 at 04:28

5

You have to make base href change to below.

<base href="/my-project">

And then change img src to below

<img src="assets/srk-favicon.ico">

answered Mar 15 '17 at 04:28

Pankaj Parkar

134,766
23
234
299

Why we need to do this ? – Lijo Jul 26 '18 at 03:18
@Lijo thanks for heads up.. What would be alternative to this then? I know this works perfectly for me. – Pankaj Parkar Jul 26 '18 at 03:58

score 2 · Answer 2 · edited Mar 15 '17 at 05:28

2

Try this :

src="./assets/srk-favicon.ico"

Instead of :

src="../assets/srk-favicon.ico"

edited Mar 15 '17 at 05:28

Pardeep Jain

84,110
37
165
215

answered Mar 15 '17 at 04:37

M Fuat

1,330
3
12
24

Angular2: Cannot load assets folder images

2 Answers2