Notebook: Images in Markdown not showing when uploaded to Git

[miranthajayatilake]

I have used the below syntax to display images in notebooks

<img src="image.png">

This works well when I run the notebook locally. But when uploaded to Git the image is not displayed.
I have tried other syntax like ![my_image](files/my_image.png) also but no luck.

Please help to clarify this issue. Thanks.

[takluyver]

You mean the rendered view on Github? Are you committing the image to the repository as well?

This definitely can work, e.g. the image in this notebook shows up.

[miranthajayatilake]

Yes. Committed the images as well.

[Khalilsqu]

I am having the same problem,!! images are shown locally when notebook is run locally.

<img src="files\fig\1.1.jpg">

but no images are shown in github repos site when i commit an push all local directory to git hub!!

[takluyver]

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

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

[Khalilsqu]

Yes you are right, it is working now, I was using \ instead of /

Thank you

[mjbright]

I'm seeing issues with github rendering too.

Here's an example where I duplicate my images (once with <img> once with ![](image) format) to demonstrate this.

Locally I see the images twice, on github I see only the ![](image).

I'm using:
<img src="images/k8s-dashboard.png" width=800 /> ![](images/k8s-dashboard.png)

and

<img align="left" src="images/k8s-dashboard-namespace.png" width=200 > ![](images/k8s-dashboard-namespace.png)

[takluyver]

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

[mjbright]

Great !

Thanks Thomas.

On 12 March 2018 at 11:38, Thomas Kluyver [e-mail] wrote:

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

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/jupyter/notebook/issues/3278#issuecomment-372264458,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABywLTxTN16BFLbzgJZ4aHXd2C5VQofwks5tdlA6gaJpZM4Rx0h4
.

[davidtellez]

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.

[ProsperousHeart]

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.

[ProsperousHeart]

Yup - that resolved it. No issue here. :)

[FanrayMedia]

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" />

[JuzerShakir]

Is there any fix on how can I display an Image which Is in my repo, and I want to display in the notebook of that same repo, Jupyter renders it well but GitHub doesn't. It shows the HTML code instead.

<img src="logo.jpg" width="800" />

This is what I have coded for it! Is there any anyway we can achieve it?

[Khalilsqu]

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

[JuzerShakir]

@Khalilsqu Hey there, it worked absolutely well! Thanks alot!
But is there a way to resize the image in this same syntax of MD?
I did bit of research but I couldn't find anything which works.

Thanks!

[zeissmicroscopy]

I try to use:

![Screenshot of GUI](/Images/export_bfconvert1.png) but that does not work for me.

The MD preview in visual code display the image but on GITHUB i get an 404 if I click on the image icon.

Any ideas?

[JuzerShakir]

@zeissmicroscopy Just Try this:
![](Images/export_bfconvert1.png)

Or this (Not sure about this):
![Screenshot of GUI](Images/export_bfconvert1.png)

You can also implement it with HTML, you can resize the image too with it.

Hope this solved your problem!

[Rico-Meyn]

Hi, I have a similar issue with a background image I have in the tag in the css style sheet. I used this:
body {
background-image: url(./Pictures/image.jpg);
background-color: #919191;
}
And neither shows up. Any help?

[ttngocthao]

@Rico-Meyn
Please try this

background-image: url(“./Pictures/image.jpg”);

[mengban]

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.

[takluyver]

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.

[dwanneruchi]

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.

This was the issue that had led to such a headache on my end, did not realize this. Thank you!

[GurpurNamithaKamath]

Hi please help. I have taken a screenshot of a data frame in python & saved it on my laptop. When I copy the image in python again it opens but in github it doesn’t. I tried using

but in vain. I tried other solutions like
but no use. Please help. I have to upload images of the screenshots I had taken of my notebook for my report. Please help

[dwanneruchi]

@GurpurNamithaKamath can you share the code you are using as well as the file path? For me I had to be careful about the .PNG vs .png.

[ahmedohadi]

After about four days of finding out why images not appearing when publishing, I assure you all those days spent on attempting JUST A LOT, but all I do now to update the site with any images or other contents very quick is these steps:

• npm i angular-cli-ghpages --save-dev
• ng build --prod --base-href "the link on the repo shown under setting" // make sure last seg is the repo name not the project name
• on angular 6+ cli do: npx ugh --dir=projectName/dist

every time you update the images, you ng build ... as well as npx ugh --dir=projectName/dist

Please share if you have a shorter solutions!

[ChenChenDS]

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??

[ajharry]

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%" />

[ChenChenDS]

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%" />

I change the jpg to JPG. then it works. you can have a try

[ncoughlin]

I also had this issue on some of my images, but not others. It ended up being how I capitalized my image names in my markdown file. For example:

Image name on my computer:
oneGreatImage.png

Image name in my Markdown file:
onegreatImage.png

When I capitalized the G again and pushed the changes it loaded just fine.

[stenivan]

I also have this issue and I can't seem to find the solution. Help?

"

"

UPDATE: I solved it! I ended up doing it in this format, uploaded the image in the repo folder instead of using the URL: "![Keywords-Ads-Landing pages flow](kwds_ads_lpages.png)"and it worked.

[ajharry]

The problem is likely that final backslash in the url, either change it to a front slash or remove it entirely.

[stenivan]

Hi @ajharry thanks for the tip but I just tried it but it's not working either. UPDATE: The problem is now solved I ended up uploading the image on the repo folder instead of using the URL and I used this format "![Keywords-Ads-Landing pages flow](kwds_ads_lpages.png)"

[arjunsingh2908]

@takluyver @ajharry Hey Guys, I am new to all of this but I am facing the same issue. I have tried pretty much everything suggested here but still no luck. Can someone please help me out. My Notebook and the image I want is in the same folder on Github, what am I doing wrong?
https://github.com/arjunsingh2908/Applied-DS-Capstone-Project---Week-4-and-Week-5/blob/master/Capstone_Project---The_Battle_of_Neighborhoods_Week1_Part_1_Introduction.ipynb

Github Image: https://github.com/arjunsingh2908/Applied-DS-Capstone-Project---Week-4-and-Week-5/blob/master/Capstone_Project---The_Battle_of_Neighborhoods_Week1_Part_1_Introduction.ipynb

Also, another Markdown cell below the image where I have included some formatting and colors is not going through. Any clues?

[joshua-ruf]

Github appears to be case sensitive when it comes to file extensions while Rmarkdown is not

[FazeelUsmani]

Please help!!! Jupyter Notebook Markdown Images are not showing on GIt

This is the actual notebook containing images:

But this is what shows on GitHub:

Link to my notebook on GitHub

[madpiano]

Please help!!! Jupyter Notebook Markdown Images are not showing on GIt

This is the actual notebook containing images:

But this is what shows on GitHub:

Link to my notebook on GitHub

Hi, did you find a solution? I had the same problem (I copy&paste images into local notebook then upload to Github) and could not find a solution. However, nbviewer does display images correctly.

[nmwhitehead]

I'm having the same issue, but some images are working and some aren't, despite the same format being used.

<img src='Graphs/Healthcare_Cost.png'/>
is appearing, as is
<img src='Graphs/Healthcare_Cost_vs_GDP.png'/>

but
<img src='Graphs/50%_Predictor.png'/>
<img src='Graphs/90%_Predictor.png'/>
<img src='Graphs/Future_50%.png'/>
<img src='Graphs/Future_99%.png'/>
and
<img src='Graphs/Bottom_50%.png'>
are all not appearing.

They all work fine in Jupyter Notebook when I view it as a Markdown, but when I transfer it to Github, all but the least important two go away and I am losing my mind right now.

---

UPDATE!

It was the %'s in the photo names. Apparently they don't cause a problem in Jupyter Notebook but do in GitHub.

[ncoughlin]

I was not able to find a solution. But this was a while ago. This images
showed for me but not for my teammates. If I had to venture a guess it's
because the images themselves are not actually uploading to GitHub. You
may want to try hosting the images online and then using links to the
online images instead of local links.

------ Original Message ------
From: "madpiano" [e-mail]
To: "jupyter/notebook" [e-mail]
Cc: "Nick Coughlin" [e-mail]; "Comment"
[e-mail]
Sent: 10/21/2019 10:41:50 AM
Subject: Re: [jupyter/notebook] Images in Markdown not showing when
uploaded to Git (#3278)

Please help!!! Jupyter Notebook Markdown Images are not showing on GIt

This is the actual notebook containing images:
Actual
https://user-images.githubusercontent.com/8823157/64107612-8d3fc300-cd98-11e9-9d43-c5ce5187fc4d.JPG

But this is what shows on GitHub:
Showing
https://user-images.githubusercontent.com/8823157/64107615-8dd85980-cd98-11e9-8266-be3f85fa6525.JPG

Link to my notebook on GitHub
https://github.com/FazeelUsmani/Coding-Ninjas---Data-Structures-and-Algorithms-in-Python/blob/master/_19.01%20Intro%20to%20Graphs.ipynb

Hi, did you find a solution? I had the same problem (I copy&paste
images into local notebook then upload to Github) and could not find a
solution. However, nbviewer does display images correctly.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/jupyter/notebook/issues/3278?email_source=notifications&email_token=AAYFLVAL36SETKD57NSOW4LQPWWR5A5CNFSM4EOHJB4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEB2LPOA#issuecomment-544520120,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAYFLVDTUIGACZBLL7TNGXTQPWWR5ANCNFSM4EOHJB4A.

[pknock-Fender]

This is still a problem. I've tried many of the things suggested here, and nothing seems to be working. I haven't found any way to display images in markdown in the github jupyter notebook renderer, despite the images appearing fine when I run the notebook locally.

[Tuan96]

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.

[agairola19]

Tried every suggestion but images are not rendering in github view but it is renderign in Jupyter notebook.

"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
""
]

[VarpePrasad1]

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.

Thanks buddy, it works perfectly for me... thank u so much :)

[frios2020]

Hi guys, I have the same problem. I put an image on google colab using:
, I can visualize it but i cant do it on github ? please help me

[SankBad]

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

[FlorianFasmeyer]

Tried every suggestion but images are not rendering in github view but it is renderign in Jupyter notebook.

"cells": [
{
"attachments": {},
"cell_type": "markdown",
"metadata": {},
"source": [
"<img src="Images/sample.jpg" width=300 height=890 align ='left' />"
]

Yep... height does not work when you this format : <img src="images/l8_forest.png" height="550px" />

That being said it's the only format that you might want to use...

This works:

• <img src="images/l8_forest.png" width="550px" />

This does not work for GitHub display:

• <img src="images/l8_forest.png" width="550px"> because it is missing /
• <img src="images/l8_forest.png" style="width: 550px" /> because it is using style

This does not work for Jupyter Lab:

• <img src="images/l8_forest.png" height="550px" /> because it is using height

[AhmedShaykhoun]

I Tried all of these instructions. sadly, I did not find the solution until now

[manmeetkaurbaxi]

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

[AK-Win]

i also have images not displaying in github..
i solved as follow...

this is image flow in atom
="D:\Web Development\HTML-Personal Site\images\marilyn-monroe-1270659_640.png">

this is in github
="images\marilyn-monroe-1270659_640.png">

[hisplan]

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")

[coderkarthiko]

from IPython.display import Image

In code cell run Image('') and the output should be the image. Now it should show up on GitHub!

[abielhammonds]

Hi - can anyone please suggest a solution to why images are not showing with my code?

Here one example in the markdown cell:

And here is another example that doesn't work either:

I am using a public repository and jupyter notebook. Many thanks!

[abielhammonds]

Hi - can anyone please suggest a solution to why images are not showing with my code?

Here one example in the markdown cell:

And here is another example that doesn't work either:

I am using a public repository and jupyter notebook. Many thanks!

Cancel this question! I needed to have the images on GitHub and then the second code example worked.

[FazeelUsmani]

Please help!!! Jupyter Notebook Markdown Images are not showing on GIt
This is the actual notebook containing images:

But this is what shows on GitHub:

Link to my notebook on GitHub

Hi, did you find a solution? I had the same problem (I copy&paste images into local notebook then upload to Github) and could not find a solution. However, nbviewer does display images correctly.

Yes, @madpiano. I got it. I was not giving the path properly. Have a look, how to insert an image at my repo