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:

Answer 1

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.

Answer 2

To my knowledge, for VSCode on Linux, the local image can be normally displayed only when you put the image into the same folder as your .md post file.
i.e. only ![](image.jpg) or ![](./image.jpg) will work.
Even the absolute path like ![](/home/bala/image.jpg)also doesn't work.

Answer 3

just copy the image and then paste it, you will get the output

![image.png](attachment:image.png)

Answer 4

Adding a local image worked for me by like so: ![alt text](file://IMG_20181123_115829.jpg)

Without the file:// prefix it did not work (Win10, Notepad++ with MarkdownViewer++ addon)

Edit: I found out it also works with html tags, and that is way better: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2: In Atom editor it only works without the file:// prefix. What a mess.

Answer 5

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

Answer 6

if image has bracket it won't display

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

rename the image and remove brackets

![alt text](Isolated-1.png)

Update: if you have spaces in the file path, you should consider renaming it too or if you use JavaScript you can encode it using

encodeURIComponent(imgName)