Image does not load on site hosted on Github

Question

I uploaded an image, and linked it to the html file using proper extension and proper link to the image. Even then, the image doesn't show up.

Here's a link to my website- http://valaparthvi.github.io/

And a link to my github profile- https://github.com/ValaParthvi/valaparthvi.github.io

What is going wrong here? What are possible solutions?

Answer 1

The source for that image includes your home directory (/home/). No one else in the world knows that. You need to provide a proper URL that a web browser can reach. The URL for that image would be //raw.githubusercontent.com/ValaParthvi/valaparthvi.github.io/master/DSC_07321.resized.png.

Understand that when you upload a website to GitHub, it stores all the files there. All the paths to those files must be reachable by someone on the internet. Hopefully I cannot access your home directory.

GitHub pages also provides more convenient, branch-agnostic URLs. For your image, it would be /DSC_07321.resized.png. The advantage of this is that the source is not defined, so it will work locally and when deployed. In both other cases, when using your home directory or when using the fullGitHub URL, you're using an absolute URL, which won't work across multiple sources.