Images from my local computer are rendered correctly in Jupyter, but not in github

Hi everyone,

I am trying to insert some images from my local computer to my guided project. In Jupyter notebook, the images look ok, but in github and nbviewer they are not rendered.

My Code:

<img src="map.jpg" width="370" style="margin-top: 7px;">

or, alternatively, I tried also this:

![map](map.jpg)

What I expected to happen:
I expected the pictures to be rendered both in Jupyter and later in github and nbviewer. Earlier, when I used both of the approaches above, but with the links on the pictures on the Internet, everything went well.

What actually happened:
This time, when I am using the images from my local computer, they are rendered in Jupyter, but in github and nbviewer not.

Of course, the image files are saved in the same folder as my project, and of course, the file name is correct. I have tried some ways to fix it, which I found in Google: using a backslash before closing the angular brackets, using JPG instead of jpg. Nothing helps :woozy_face:

Any idea how to fix it?

Thank you in advance!

1 Like

hi @Elena_Kosourova

Think I have the solution, you should see something like this:

![map](attachement:map.jpg)

So just drag and drop the img into the markdown cell and it should work!

2 Likes

Thanks a lot @WilfriedF, it’s incredibly easy and it works perfectly! :grinning:

1 Like

Elena:

It worked great for me in Jupyter/Python but not when I was running SQLite in Jupyter.
It appears that it’s a little tougher to make “pretty” output with SQLite.

Regards,
Bruce

Hi Bruce,

No, it should work in whatever Jupyter, doesn’t matter if you work in SQL or Python there. :thinking:

The only thing is that you should create a new markdown cell where to drop a picture. Because now when I use this approach rather often, sometimes I don’t manage to insert a picture in a markdown cell where I already have some text typed. So it seems to be important to have a separate markdown cell for a picture.

Thank you Elena!

It works fine for me when I’m running Jupyter with SQLite from Anaconda but not when I’m running Jupyter from DataQuest. Even when I create a new Markdown cell.

When it is working, the outline box of a Markdown cell changes from a solid line to dashed line as I drag the picture file into the Markdown box. The solid line in Jupyter DataQuest does not change to a dashed line and therefore does not transfer to the Markdown cell.

Best regards,
Bruce

This was very helpful!

A question: if I use the solution described in this post, can I then still set any properties for the picture? In particular, the size of the picture?

Example, the ‘original’ code

<img src="map.jpg" width="370" style="margin-top: 7px;">

contained a width.

Is it still possible to do so when using

![map](attachement:map.jpg)

(in a separate cell) instead?

I don’t think so.

The ![]() syntax is pure Markdown. Markdown’s specifications, I think, are such that they incorporate HTML to make it more powerful. The first code block in your post is HTML.

I do not expect Markdown to implement such level of detail for images, I think the spirit is to leave that for HTML.

1 Like

Hi Jasper,

If you decide at the end not to use markdown and use HTML instead, you may find helpful this post:

1 Like

[UPDATE: I did get it to work in the meantime. Will post a reply to my own question…]

Hi Elena,

Thank you for the explanation. Somehow I am not getting this to work.
So I created these two cells (as per my understanding of the above):

code to show pic left aligned

where the first one is a Code cell and the second one a Markdown cell.

The output, however, looks like this:

code to show pic left aligned - output

So I just get the text “aligned_image” rather than rendering the picture.

I guess I misunderstood something… but what?

1 Like

Got it to work now. Rather than directly putting in the text ![aligned_image](attachment:survey_fields_pic.png), I had to first drop the .png file into the Notebook cell, and after that update the text.

1 Like

Great job debugging it, Jasper! Happy to hear that you’ve managed to fix it! :star_struck::+1:

1 Like