notebook: Images in Markdown not showing when uploaded to Github

I spent some time figuring out what the problem with my image was. It turns out that Jupyter renders the following correctly and Github fails to do so:

<img src="myimage.png", width=800> <img src="myimage.png", width="800">

The following fixes the problem (notice the absence of comma and the trailing /):

<img src="myimage.png" width="800" />

Hopefully, it’ll be helpful to somebody else.

RE: Images in markdown/html not showing when uploaded to a private repository

If I recall correctly, I don’t think I had this issue before. Maybe github’s notebook rendering engine has changed recently???

So far, the only solution that worked for me was this aesthetically unappealing ugly snippet:

from IPython.display import Image
Image(filename="images/hello.png")

HTTP paths use forward slashes (/) not backslashes (\).

If that’s not us, can you point to an example on Github?

With regard to images not displaying properly in private notebooks hosted on GitHub, this is actually a bug in GitHub’s notebook hosting. If you right click on such a broken image and open it in a new tab, it displays in the new tab properly, even though it displays as broken in the notebook.

What is happening is as follows: The browser does not provide the Cookie http header when the image is requested from the notebook because the request does not meet the “same origin” test. Without that cookie to prove the user should indeed see the content, GitHub’s server returns a 404, rather than a 302 redirect to the image hosted on https://raw.githubusercontent.com/.

I believe that GitHub could fix this by sending HTTP response headers such that this request would pass the “same origin” test.

Even I tried both, "<img src=".images/functions.png)" />" and "![](images/functions.png)", but none works in a private repo.

None, of the above answers, is working for a private repository. I tried both, <img src="../images/myimage.png)" /> and ![](../images/myimage.png)

@JuzerShakir ![](images/capture.JPG) works for me. images/ is the relative directory.

It appears Github doesn’t like your unquoted width=800. I changed it to width="800" and it worked.

I’m closing this issue here, since this isn’t a bug in Jupyter Notebook.

Instead, it’s a difference in how Github renders notebooks. The images must be checked-in to the Github repository and (it appears) the links in the notebook must use raw HTML <img> tags for Github to find the images.

Unfortunately, Jupyter has no control over how Github renders notebooks; a better solution is to view notebooks on Github using nbviewer.

If you have further questions related to rendering images in notebooks, we suggest you post your questions on Jupyter’s Discourse page.

Thanks all!

Check your file extension in markdown, cause git are case sensitive example (.jpg to .JPG)

I have tested most of the comments; however, following way worked for me.

1. build the folder in the same repository with the image name.
2. create a file " .gitkeep" in the Image folder.
3. upload your images in this folder.
4. Add address like: ‘’‘img src=‘Image/name.PNG’ />’‘’
5. Note: building Image folder is necessary.

I met the same questions too. But the reason of my problem is interesting. I use the windows’s captute tool . The pic format saved is .PNG ,however in the local ipynb i use ![](image/xx.png) it works well. But in github，it doesn’t. when I change ![](image/xx.png) to ![](image/xx.PNG) . It works well both in github and local.

Filenames on Linux are case sensitive, so xx.PNG and xx.png are two different files, whereas on Windows they’re the same. URLs generally follow the Linux pattern, but it’s up to whatever serves the file how it handles finding it. I would guess tornado just checks if it can open the file, and doesn’t check that the name matches exactly.

It works for private repository. Be sure that you push the image into repository. ![sample_image.png](attachment:sample_image.png)

I also encountered a similar problem here where my image is not showing. I used the background-image in CSS as follows: background-image: url(/images/sanadreas.jpg);

When I uploaded the images to GitHub and checked the website on a desktop, some images were showing, some were not. When I tested it on mobile, all images were not showing. I’m still looking for a good fix.

I have the same issue, the jpg does not show after publish. I tried with

1. < img width=“85%” src=“image/data_cleaning1.jpg” /> 2.< img width=“85%” src=“image/data_cleaning1.jpg” /> 3.< img src=“image/data_cleaning1.jpg” /> all of them did not work. Can anyone help me with the issue??

Try removing the space before img, i.e. <img src="image/data_cleaning1.jpg" width="85%" />

What is weird is that I have some wiki pages with ![](img/my-image.png) and the image would show up fine while some with exact code not working.

This code seems to work for me now <img src="img/my-image.png" />

Yup - that resolved it. No issue here. 😃

I haven’t tested images locally - but if you copy/paste into the Jupyter notebook, it keeps the image. However when uploaded to git this isn’t moved over. Interesting “bug” - will try uploading the images to git and changing Jupyter notebook to look for the image locally.