Inserting pictures into markdown cell

Jupyter Notebooks
1

Hi,

I would like to insert pictures into markdown cell and share the notebook with others. I tried it in many ways:

<img src="image.jpg">
<img src="/eos/user/n/ngal/Swan_pics_inside_notebook/image.jpg">
<img src="\\cernbox-smb\eos\user\n\ngal\Swan_pics_inside_notebook\image.jpg">
<img src="https://cernbox.cern.ch/files/spaces/eos/user/n/ngal/Swan_pics_inside_notebook/image.jpg">
<img src="https://swan005.cern.ch/user/ngal/view/Swan_pics_inside_notebook/image.jpg">


![image6](image.jpg)
![image7](/eos/user/n/ngal/Swan_pics_inside_notebook/image.jpg)
![image8](\\cernbox-smb\eos\user\n\ngal\Swan_pics_inside_notebook\image.jpg)
![image9](https://cernbox.cern.ch/files/spaces/eos/user/n/ngal/Swan_pics_inside_notebook/image.jpg)
![image10](https://swan005.cern.ch/user/ngal/view/Swan_pics_inside_notebook/image.jpg)

In the SWAN environment, when I push the run cell button, the 1. and the 6. method works, but when I try to use Voila! or try to open the notebook via CERNbox nor of the methods working just get missing pictures. The jupyter notebook and the picture are in the same folder.

img1
img11920Ă—1832 136 KB

Can anyone tell me what is the right way of inserting pictures into jupyter notebook via markdown?

2

Hi @ngal ,

We will have to debug this…
But in the meantime, as a workaround, I suggest you create a public link from CERNBox and insert it as the image.
Go to cernbox.cern.ch, search for your picture, and create a public link. Then you need to use the direct file link, which is something like https://cernbox.cern.ch/s/your_pl_token/download.

Let me know if it help,
Diogo

1 Like
3

Thank you for the reply!
Yes, I already found and using this workaround.

But, it will be a much nicer and cleaner solution to have a direct link, looking forward to the solution. Thank you.

4

The “traditional” notebook way is to pump a base64 encoded image into the markdown directly. A tool like https://codebeautify.org/image-to-base64-converter can help. (useful notes in Essi Alizadeh - 3 Ways to Add Images to Your Jupyter Notebook)

1 Like