Markdown in jupyter relative image path

Question

I am making a jupyter notebook. If it matters, my OS is Windows 10. My folder structure is such that the notebook is in a folder called Code, and there are some images in a folder called Data, which is at the same level as Code. E.g., if the notebook is called jupnotebook.ipynb, and one of the images is called im1.png, my folder structure looks like this:

Project
├───Code
│   ├───.ipynb_checkpoints
│   └───jupnotebook.ipynb
└───Data
    └───im1.png

Using markdown in the jupyter notebook, I would like to be able to display the images in the Data folder, without using an absolute path to the image. So far I have not been able to do this. I have tried code that looks like:

<img src = "./Data/im1.png">

This does not work. How in markdown can I display images with relative paths that require going up one (or more) directories, followed by going into subdirectories?

Thanks.

Harr

Answer 1

This is a quite old quest. The answer can be found in other place but for saving your time, I will answer this question here.

Until now, it seems that there is no simple way to do what you want with the markdown syntax, as I know (if I am wrong, please post it. It will be very useful).

The only way I found is the method Reblochon Masque suggested in (How to Include image or picture in jupyter notebook). i.e. import some modules and use them.

from IPython.display import Image 
from IPython.core.display import HTML 

PATH = "C:/test../../Project/Data/" 
Image(filename = PATH + "im1_1.jpg", width=556, height=818)

From my test, I can say that his code is going to work.

With use of markdown syntax, unfortunately, the image file should locate in the same folder, where the notebook file reside in. Let's say that test.ipynb is in the folder of "Python_Practice_Scripts". Then you should put your image file in the same folder. Now you can include your image as follows:

![test](../Python_Practice_Scripts/Open_file.png)

or

<img src="../Python_Practice_Scripts/Open_file.png" alt = "test pic" style = "width:1182px; height=702px;">

This is quite annoying. This messes a file organization up. Later, Jupyter project team should do something in my opinion even though I really appreciate their hard works.

Cornered

One problem w/ this is, unlike markdown, can't mix image and text. that combo is useful in documenting notebooks w icon highlights – Hayner

Answer 2

Try ../Data/im1.png

![Description](../Data/im1.png)

Byrd

Answer 3

I could not get this to work for an image on a different drive. My workaround was to use the menu item

Edit > Insert Image

though I think this adds the image to the state of the notebook, rather than pointing to the local file as the original poster wanted. The resulting markdown looks like this:

m![graph.png](attachment:graph.png)

Moneychanger

Answer 4

There is a github issue about this. Using user3558855's example, the notebook server needs to be started in Project/ rather than Code/. Then the relative path given by user6355317 should work.

Mohandis