1

I tried to add an image from a local drive to markdown in a Jupyter notebook in Visual Studio Code, but I am unable to do so.

I have followed the guidance of this question and also this question where the template given is this:

![](path_to_image)
*image_caption*
  • When I put in a url, the above works as expected.
  • When I add a sub folder with an image inside, it also works as expected.

However, when I copy a path to an existing image file from a general windows folder the above does not work. An example path looks like this for me: "C:\Users\admin\OneDrive\Pictures\happy_face.PNG"

I have tried:

  1. Changing the path name to have \\ in place of \
  2. Changing the path name to / in place of \
  3. Using "" to enclose the path
  4. Using the full path name to ensure no ambiguity.

So basically, I am running out of options and am wondering how getting an image from the local drive can be achieved (assuming that this is possible)?

Timothy G.
  • 6,335
  • 7
  • 30
  • 46
D.L
  • 4,339
  • 5
  • 22
  • 45

1 Answers1

1

You can use relative paths to the file. By default, markdown paths starting with / resolve to the workspace root. Paths starting with ./ resolve relative to the file.

For example, lets say your markdown file is located in C:/dev/Markdown and your image(s) are located in C:/dev. If you try to do:

![My Test Image](C:/dev/MyImage.jpg)
*My Test Image*

This won't work, because the markdown file will try to look for the image using relative pathing. You can see the path it is trying to resolve by trying to open the link of the image in the markdown by holding Ctrl and left clicking it and then hover over the tab like so:

hovering over the image tab to see the path it is trying to resolve

Notice how butchered that path is. Thus, you need to use relative paths to the file. In this example, you can do:

![My Test Image](../MyImage.jpg)
*My Test Image*

This will resolve to C:/dev/MyImage.jpg. Depending on how deep your file is in a folder structure, you may need to go further back (so maybe something like ../../..MyImage.jpg).

Visual Studio Code will even try to autocomplete paths if it can like so:

Visual studio Code showing path suggestion to image

Timothy G.
  • 6,335
  • 7
  • 30
  • 46
  • 1
    excellent explanation. I thought it might have been something along those lines, so thanks for confirming ! – D.L Nov 02 '22 at 14:52
  • @D.L I believe you can even do something like `../../C:/folder/MyImage.jpg` - this is like saying _go back two directories, then go into `C:/folder`_ – Timothy G. Nov 02 '22 at 14:54