darren
darren

Reputation: 5734

How to reference an image in markdown that is on my local drive?

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*

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

Upvotes: 1

Views: 3393

Answers (1)

Timothy G.
Timothy G.

Reputation: 9095

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

Upvotes: 2

Related Questions