Search code examples
imagegithubhtmlgithub-flavored-markdown

GitHub images appear in ReadMe.md, not in published page


On GitHub, I created a ReadMe.md with screenshots

but when I publish the website, it doesn't show the image. I used

![alt tag](https://raw.github.com/username/projectname/branch/path/to/img.png)

and

<img src="https://raw.github.com/username/projectname/branch/path/to/img.png" alt="https://raw.github.com/username/projectname/branch/path/to/img.png">

But nothing works. What format can I insert images where it will display on both ReadMe.md and the Webpage?

Link ReadMe.md: https://github.com/Sonihal/moveclient/blob/master/README.md

Link to Webpage: http://sonihal.github.io/moveclient


Solution

  • Your website is trying to load images from the wrong link:

    <img src="https://github.com/Sonihal/moveclient/blob/master/group_name_and_id.JPG" alt="https://github.com/Sonihal/moveclient/blob/master/group_name_and_id.JPG">
    

    You should update it to use the raw image link in github:

    https://raw.githubusercontent.com/[USER]/[REPO]/[BRANCH]/[PATH_TO_IMAGE]

    Example: https://raw.githubusercontent.com/Sonihal/moveclient/master/group_name_and_id.JPG

    https://raw.githubusercontent.com/Sonihal/moveclient/master/group_name_and_id.JPG

    In Readme.md file, you can use both because it seems Github markdown understands it and wrap it automatically to get the image.