Skip to content

How do I display a local image in Markdown

How do I display a local image in Markdown? - Stack Overflow

Section titled “How do I display a local image in Markdown? - Stack Overflow”

How can I display a local image in Markdown? I don’t want to set up a web server for that. I try the following in Markdown, but it doesn’t work: #![image](files/Users/jzhang/Desktop/Isolated.png)


There are a few formats that we can choose from, as the official website shows. One of them, if you put a

![alt text](Image.jpg "Title")

The path can be relative an absolute too (the example uses relative). The above assumes Image.jpg is in the same folder as the Markdown file. Relative paths are useful for repositories, when others clone the project into a different folder.

The alt text will be shown if the picture cannot be drawn on screen.

The Title is optional and it will be the tooltip (mouse hover over). Several screen readers rely on those values; be kind and write meaningful text.

If you use spaces in filenames, like Arthur Dent.jpg, then you need to wrap the path in < > as follows:

![Arthur's profile picture](<Arthur Dent.jpg> "Title")

Here’s an example of referencing an image from a neighboring folder:

root
├── Documentation
| └── Readme.md
└── Resources
└── Arthur.jpg

Then, in file Readme.md (../ one directory up, Resources/ within Resources folder, Arthur.jpg this image):

![alt text](../Resources/Arthur.jpg "Title")