Angular image not showing after deploying to Github Pages

Question

I'm new to Angular. I recently deployed a sample webpage to Github Pages. I was successful at deploying but images that are visible on localhost are not showing up. Instead, I'm getting a 404 logged on the console.

This is the component containing the img :

home.component.html :

<div>
    <img src='assets/images/birthday.jpg' alt='Happy Birthday' width="385px"/>
</div>

My directory structure is :

   |src
   |--app
   |--assets
    |---images
     |----birthday.jpg

The directory structure in the dist folder is :

   |dist
   |--happy-birthday
    |--assets
     |---images
      |----birthday.jpg

I'm deploying using angular-cli-ghpages package. My Angular version is 10.0.14.

can you share your 404 error ? like it must have clearly defined the 'image path' that must be missing. — Amod Shinde
– Amod Shinde, Commented Aug 31, 2020 at 4:38

0x6368656174 · Accepted Answer · 2020-08-31 04:37:07Z

5

Try to use /assets/images/birthday.jpg.

answered Aug 31, 2020 at 4:37

0x6368656174

9925 silver badges13 bronze badges

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

Comments

Mangly · Accepted Answer · 2020-08-31 05:03:03Z

0

Try explicitly giving a relative path (Path of the img relative to home.component.html) An example is given below, this may however change depending on your directory structure.

<div><img src='../assets/images/birthday.jpg' alt='Happy Birthday' width="385px"/></div>

answered Aug 31, 2020 at 5:03

Mangly

115 bronze badges

Comments

Mohsen · Accepted Answer · 2022-12-15 09:12:14Z

0

I just tried without the leading slash and it worked: src='assets/images/birthday.jpg'.

answered Dec 15, 2022 at 9:12

Mohsen

1,1282 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular image not showing after deploying to Github Pages

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related