Search code examples
htmlgithubmarkup

Insert picture to Github page?


How do you insert an image to the Github README, so that it shows up when loading a Github page that uses the README as the source?

I have written this code in my README:

<img src="https://github.com/my_username/xxx/blob/master/image.jpeg" width="1000"/>

When I look at the README in the repository, the image shows up. However, when I open my Github page (which uses the Jekyll theme), the picture shows up as a broken image symbol.

I would much appreciate some guidance! Thanks :)


Solution

  • As shown here, try instead to place your image in another folder (not something with an _ underscore). Create /assets/images/ in the root of your project and place the image there.

    Then in your README.md, you can reference it with either HTML or Markdown

    ![image](/assets/images/your-image.jpg)
    

    (to avoid putting all images in the same folder, see the jekyll-postfiles plugin)

    Check that is displays in both GitHub and GitHub pages after Jekyll processed your project.