CODEWITHSUNDEEP
htmlangularimagegithubgithub-pages
Surya Vasireddy
Surya Vasireddy

Reputation: 11

Images are not loading in GitHub pages hosted from docs directory

My images are not loading in GitHub pages and my base href in /docs/index.html is "/SindhuApp/

I am deploying from /docs in GitHub.

This is the folder structure in GitHub pages I am deploying from /docs

And this is from the file src/app/login/login.component.html:

<div>
<p class="Anime"><img src="src/assets/angular5.png" alt="Angular Image" style="height: 70px; width:80px;" >
    <img src="docs/assets/ts.png" alt="TS Image" style="height: 70px; width:70px"> 
    <img src="docs/assets/html.png" alt="HTML Image" style="height: 75px; width:75px">
    <img src="docs/assets/css.png" alt="CSS Image" style="height: 75px; width:75px">
    <img src="docs/assets/material.png" alt="Material Image" style="height: 65px; width:70px"></p>
</div>

I am unable to see the images and this is my portfolio project. I tried all the solutions in stack overflow but none is working for me. But all the pages are loading properly only except images.

Upvotes: 0

Views: 199

Answers (1)

Henry
Henry

Reputation: 15701

Since your site is hosted from the docs/ directory, your import paths need to reflect this. Currently the import paths are configured relative to the repository root rather than the docs/ directory.

The fix for this is quite simple in this case, you just need to remove the docs/ prefix from your import paths, like this:

<div>
<p class="Anime"><img src="assets/angular5.png" alt="Angular Image" style="height: 70px; width:80px;" >
    <img src="assets/ts.png" alt="TS Image" style="height: 70px; width:70px"> 
    <img src="assets/html.png" alt="HTML Image" style="height: 75px; width:75px">
    <img src="assets/css.png" alt="CSS Image" style="height: 75px; width:75px">
    <img src="assets/material.png" alt="Material Image" style="height: 65px; width:70px"></p>
</div>

Keep in mind also that docs/ will be the root directory when hosted so you cannot access siblings of docs/ (e.g. src/), even with import paths that reflect the correct location (e.g. ../src/ will not work). If you need access to other resources, they will need to be placed in docs/ as well.

You might run into difficulty because the import paths need to be different for development and deployment. One way you can handle this is by keeping your images within the src/ directory and copying them over to docs/ as part of your build process. You might want to check out the package angular-cli-ghpages to help with the build and deployment.

Another thing to note is that import paths with GitHub Pages are case-sensitive as discussed here: Images not displaying in Github Pages?.

Upvotes: 1

Related Questions