7

I managed github to run my index.md through Jeckyl and display it under github.io by following https://help.github.com/articles/creating-project-pages-manually/. However, my images links of this form:

 ![Sicherung vorbereiten](img/export.png?raw=true)

don't show as they did in README.md

Can I use images together with github.io when run from markdown files?

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
andig
  • 13,378
  • 13
  • 61
  • 98

2 Answers2

3

Add a / in front of your img folder, like this:

![Sicherung vorbereiten](/img/export.png)

I just tried it on a test github pages page and it worked for me.

Source: official Jekyll documentation example: https://jekyllrb.com/docs/posts/#including-images-and-resources.

Including images and resources

At some point, you’ll want to include images, downloads, or other digital assets along with your text content. One common solution is to create a folder in the root of the project directory called something like assets, into which any images, files or other resources are placed. Then, from within any post, they can be linked to using the site’s root as the path for the asset to include. The best way to do this depends on the way your site’s (sub)domain and path are configured, but here are some simple examples in Markdown:

Including an image asset in a post:

... which is shown in the screenshot below:
![My helpful screenshot](/assets/screenshot.jpg)

Linking to a PDF for readers to download:

... you can [get the PDF](/assets/mydoc.pdf) directly.

Related

  1. For additional image manipulation instructions, such as align left, align center, align right, image resizing, text wrapping, etc., see my other answer here: GitHub README.md center image
Gabriel Staples
  • 36,492
  • 15
  • 194
  • 265
0

if you are accessing the picture by using the Github link, don't forget to add ?raw=true at the end of URL. e.g. https://github.com/repo_name/img/picture_name.png?raw=true Otherwise, the picture won't show on your webpage.

Yinhao
  • 59
  • 1
  • 9