How do I display local image in markdown?

Question

Does anyone know how to display a local image in markdown? I don't want to setup a webserver for that.

I try the following in markdown, but it doesn't work:

![image](files/Users/jzhang/Desktop/Isolated.png)

Solution 1

I suspect the path is not correct. As mentioned by user7412219 ubuntu and windows deal with path differently. Try to put the image in the same folder as your Notebook and use:

![alt text](Isolated.png "Title")

On windows the desktop should be at: C:\Users\jzhang\Desktop

Solution 2

The following works with a relative path to an image into a subfolder next to the document:

![image info](./pictures/image.png)

Solution 3

Solution for Unix-like operating system.

1. Create a directory named like Images and put all the images that will be rendered by the Markdown.

2. For example, put example.png into Images.

3. To load example.png that was located under the Images directory before.

![title](Images/example.png)

Note : Images directory must be located under the same directory of your markdown text file which has .md extension.

Solution 4

To add an image in markdown file the .md file and the image should be in the same directory. As in my case my .md file was in doc folder so i also moved the image into the same folder. After that write the following syntax in .md file

![alt text](filename)

like ![Car Image](car.png)

This has worked for me.

Solution 5

The best solution is to provide a path relative to the folder where the md document is located.

Probably a browser is in trouble when it tries to resolve the absolute path of a local file. That can be solved by accessing the file trough a webserver, but even in that situation, the image path has to be right.

Having a folder at the same level of the document, containing all the images, is the cleanest and safest solution. It will load on GitHub, local, local webserver.

images_folder/img.jpg  < works
/images_folder/img.jpg  < this will work on webserver's only (please read the note!)

Using the absolute path, the image will be accessible only with a url like this: http://hostname.doesntmatter/image_folder/img.jpg

View more solutions

Comments

[niCk cAMel]

What does "Title" do?

[chris]

@niCkcAMel "Title" is what is shown if you hover your mouse over the image. "alt text" is what is shown, instead, if the image cannot be displayed.

[Erich Kuester]

IMHO the best answer, works with a GitHub markdown file in the desired manner.

[patrick]

"Try to put the image in the same file" : is that supposed to be file --> folder?

[Shanteshwar Inde]

This does not provide an answer to the question. You can search for similar questions, or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, ask a new question, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions

[funder7]

I think that your url is not valid: There's one slash missing after https. A bit late, maybe. :)

[Lingjing France]

Thanks @Funder, I correct the the url , it was a miss typing . 😉

[MasterJoe]

+1 for "The best solution is to provide a path relative to the folder where the md document is located." It showed the images on my local machine.

[Daniel Brose]

did quick edit (and typo fix) to help readability, should be right link but worth checking in case :)

[K_dev]

What is the path of that "Images" folder? Did you add it to any config in vscode?

[nevzatseferoglu]

@K_dev "images" directory must be located under the same directory of your markdown text file which has ".md" extension. I did not add any config to vscode.

[Sumax]

Pro: added HTML customization using <img > tag

[Orco]

Works fine with Jupyter Notebooks :-)

[jewishmoses]

Only this worked for me on VSCode markdown display

[WEBjuju]

![image info](pictures/image.png) also works

[Enes Karaosman]

This is good also for specifying other parameters like width or height ..

[Matthew Hegarty]

ensure no spaces in filename

[jb12n]

For anyone wondering how to add to change the image size. The following command should work: <img src="Isolated.png" alt="isolated" width="200"/>