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 set up a webserver for that.

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

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

Note: if you have spaces in the file path, they have to be url-encoded or the link won't work in some systems (e.g. GitHub). — Christian Long, Sep 01 '20 at 19:54

score 648 · Answer 1 · edited Jun 15 '23 at 12:39

648

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

edited Jun 15 '23 at 12:39

Constantin Hong

701
1
2
16

answered Jan 28 '17 at 16:29

Philipp Schwarz

18,050
5
32
36

27

What does "Title" do? – niCk cAMel Mar 21 '18 at 08:29
54

@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. – chris Jul 19 '18 at 01:46
6

For anyone wondering how to add to change the image size. The following command should work: `````` – jb12n Mar 23 '22 at 15:27
2

@jb12n thats HTML not MD. – bytedev Sep 06 '22 at 02:40
2

@bytedev HTML is perfectly fine [in Markdown](https://www.markdownguide.org/basic-syntax/#html). – 9769953 Sep 22 '22 at 08:38
1

@9769953 that's just the application allowing HTML. HTML is HTML and MD is MD :-) – bytedev Sep 22 '22 at 09:42
@bytedev I'm just stating that (inline) HTML is perfectly fine in Markdown. So that solution for image size, albeit HTML, works fine in a Markdown document, and thus (while only a comment), answers the question/adds to this (and other) answer correctly. (In fact, it may be the only solution to set an image size in a Markdown documention). – 9769953 Sep 22 '22 at 10:00
1

For what it's worth, not ALL Markdown flavors accept HTML, or if they do, they only accept certain white-listed tags with certain white-listed properties. – ErikE Sep 26 '22 at 20:04
That is because the inventor of Markdown did not set a standard, we have many flavors. Raw html is still widely supported. pandoc md flavor supports html, see: https://pandoc.org/MANUAL.html#raw-html Github flavor also supports html (since gfm is a strict superset of commonmark, superset of markdown), see: https://github.github.com/gfm/#raw-html – Dimitri Lesnoff Nov 03 '22 at 13:13
Hi, when my images is loacated at the same location as the md file it works, but in my case the images would be at ../ressources/image.jpg but that does not work... what am I missing? So it is located in a parallel folder to the md file. – Jinxi Feb 07 '23 at 09:42

Roman Vogt · Answer 2 · 2021-04-13T14:31:51.237

373

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

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

edited Apr 13 '21 at 14:31

answered Aug 24 '18 at 11:28

Roman Vogt

3,871
1
8
6

6

IMHO the best answer, works with a GitHub markdown file in the desired manner. – Erich Kuester Jan 08 '19 at 22:34
11

`![image info](pictures/image.png)` also works – WEBjuju Jun 01 '21 at 19:58

nevzatseferoglu · Answer 3 · 2020-09-02T08:35:44.233

74

Solution for Unix-like operating system.

STEP BY STEP :

Create a directory named like Images and put all the images that will be rendered by the Markdown.
For example, put example.png into Images.
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.

edited Sep 02 '20 at 08:35

answered Sep 16 '19 at 02:36

nevzatseferoglu

988
7
18

What is the path of that "Images" folder? Did you add it to any config in vscode? – K_dev Apr 29 '20 at 13:24
2

@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. – nevzatseferoglu Apr 29 '20 at 19:36
Works fine with Jupyter Notebooks :-) – Orco Mar 04 '21 at 20:46
4

ensure no spaces in filename – Matthew Hegarty Oct 28 '21 at 13:16
I don't think this solution is UNIX-like only.. – Dávid Tóth Mar 31 '23 at 07:38
I didn't state that it will not work any other operating system. Filesystem and its path resolutions algorithms are unique for each OS. Some OSs can resemble each other, it is natural. – nevzatseferoglu Apr 01 '23 at 02:02

score 30 · Answer 4 · answered Dec 08 '17 at 07:33

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.

funder7 · Answer 5 · 2019-10-26T23:43:32.740

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

+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. — MasterJoe, Apr 02 '20 at 07:03

Chukwuemeka Maduekwe · Answer 6 · 2021-03-17T20:43:51.683

21

if image has bracket it won't display

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

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(imagePath)

Also, always try to save images and files alike with lowercase, please develop that habit, just my personal view though

edited Mar 17 '21 at 20:43

answered Oct 30 '20 at 06:33

Chukwuemeka Maduekwe

6,687
5
44
67

I do agree on the pieces of advice but, technically, brackets and spaces in file names are allowed if [URL encoding](https://en.wikipedia.org/wiki/URL_encoding) is used, as in `![image (2).png](image%20%282%29.png)`. – Olivier Jun 28 '23 at 01:42

domih · Answer 7 · 2018-11-26T09:54:19.877

19

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.

edited Nov 26 '18 at 09:54

answered Nov 26 '18 at 09:27

domih

1,440
17
19

shravz · Answer 8 · 2022-10-26T07:48:51.220

14

Just add the relative image file route from the markdown file

![localImage](./client/src/assets/12.png)

edited Oct 26 '22 at 07:48

answered Oct 26 '22 at 07:24

shravz

141
1
4

score 11 · Answer 9 · answered Aug 07 '20 at 21:04

11

Depending on your tool - you can also inject HTML into markdown.

<img src="./img/Isolated.png">

This assumes your folder structure is:

 ├── img
     └── Isolated.jpg
 ├── README.md

answered Aug 07 '20 at 21:04

RockyK

403
9
12

Only this worked for me on VSCode markdown display – jewishmoses Mar 06 '21 at 12:56
This is good also for specifying other parameters like `width` or `height` .. – Enes Karaosman Oct 13 '21 at 09:31

score 9 · Answer 10 · answered Feb 24 '22 at 22:39

9

This worked for me in ubuntu:

![Image](/home/gps/Pictures/test.png "a title")

Markdown file is in:

/home/gps/Documents/Markdown/

Image file is in:

/home/gps/Pictures/

answered Feb 24 '22 at 22:39

Grant Shannon

4,709
1
46
36

Lingjing France · Answer 11 · 2019-11-19T10:00:17.110

8

Edited:

Working for me ( for local image )

![system schema](doc/systemDiagram.jpg)

 tree
 ├── doc
     └── jobsSystemSchema.jpg
 ├── README.md

markdown file README.md is at the same level as doc directory.

In your case ,your markdown file should be at the same level as the directory files.

Working for me (absolute url with raw path)

![system schema](https://server/group/jobs/raw/master/doc/systemDiagram.jpg)

NOT working for me (url with blob path)

![system schema](https://server/group/jobs/blob/master/doc/systemDiagram.jpg)

edited Nov 19 '19 at 10:00

answered Oct 17 '19 at 12:03

Lingjing France

389
3
5

I think that your url is not valid: There's one slash missing after https. A bit late, maybe. :) – funder7 Oct 26 '19 at 23:29
Thanks @Funder, I correct the the url , it was a miss typing . – Lingjing France Nov 14 '19 at 15:28
I had success with the blob path, when accessing the image from a MD file hosted on github. – Mark Chackerian Oct 31 '22 at 01:11

score 6 · Answer 12 · edited Apr 14 '20 at 15:08

6

In Jupyter Notebook Markdown, you can use

<img src="RelPathofFolder/File" style="width:800px;height:300px;">

edited Apr 14 '20 at 15:08

Daniel Brose

1,394
10
24

answered Apr 13 '20 at 20:08

Omar Abusheikh

101
1
1

did quick edit (and typo fix) to help readability, should be right link but worth checking in case :) – Daniel Brose Apr 14 '20 at 06:20
1

Pro: added HTML customization using `` tag – Sumax Aug 02 '20 at 10:00

score 5 · Answer 13 · answered Nov 18 '19 at 14:09

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.

score 4 · Answer 14 · answered Nov 23 '17 at 09:41

4

Another possibility for not displayed local image is unintentional indent of the image reference - spaces before ![alt text](file).

This makes it 'code block' instead of 'image inclusion'. Just remove the leading spaces.

answered Nov 23 '17 at 09:41

Dimitar II

2,299
32
33

score 4 · Answer 15 · answered Oct 13 '20 at 10:34

You may find following the syntax similar to reference links in markdown handy, especially when you have a text with many displays of the same image:

![optional text description of the image][number]

[number]: URL

For example:


![][1]

![This is an optional description][2]




[1]: /home/jerzy/ComputerScience/Parole/Screenshot_2020-10-13_11-53-29.png
[2]: /home/jerzy/ComputerScience/Parole/Screenshot_2020-10-13_11-53-30.png

CubicInfinity · Answer 16 · 2019-07-02T07:00:45.140

2

I've had problems with inserting images in R Markdown. If I do the entire URL: C:/Users/Me/Desktop/Project/images/image.png it tends to work. Otherwise, I have to put the markdown in either the same directory as the image or in an ancestor directory to it. It appears that the declared knitting directory is ignored when referencing images.

edited Jul 02 '19 at 07:00

answered Jul 02 '19 at 06:49

CubicInfinity

163
1
10

This does not provide an answer to the question. You can [search for similar questions](https://stackoverflow.com/search), 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](https://stackoverflow.com/questions/ask), and include a link to this one to help provide context. See: [Ask questions, get answers, no distractions](https://stackoverflow.com/tour) – Shanteshwar Inde Jul 02 '19 at 07:11
@Shanteshwar Although phrased as a problem, this offers a working solution to the question asked. – CubicInfinity Oct 07 '22 at 20:22

score 1 · Answer 17 · answered May 23 '18 at 13:06

1

Either put the image in the same folder as the markdown file or use a relative path to the image.

answered May 23 '18 at 13:06

Paresh

654
5
7

score 1 · Answer 18 · answered Feb 25 '20 at 19:47

1

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

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

answered Feb 25 '20 at 19:47

Preyash Patel

35
4

score 0 · Answer 19 · answered Mar 07 '23 at 15:18

0

For me working fine with gitlab when I have specified URL to image started from ./

Please double-check that you don't have the space between [] and ()

![img] (URL)
      ^

Sometimes very confusing.

answered Mar 07 '23 at 15:18

Kot_dnz

1

score 0 · Answer 20 · answered Jun 23 '23 at 23:08

Displaying local images in .md file (VSCode reader extension)

In my case, I tried a lot of solutions to display an image in my vscode .md reader, but none of them works. But it appears that it only works when you specify the full path to the image from the root for example: ![My image](/c:/fullpath/to/image.png).
The trick is you need to specify / before the letter c of your drive

score -1 · Answer 21 · answered Apr 12 '21 at 17:04

The basic syntax is ![Image description](Any_Image_of_your_choice.png "title"). In my case, I used image name as Any\ Image\ of\ your\ choice.png in ![Image description](Any\ Image\ of\ your\ choice.png) instead of ![Image description](Any_Image_of_your_choice.png) and it was not working. So I would say make sure to check the image directory and also image name doesn't contain spaces if so use underscore(_) instead of space.

Faced issue while using markdown in Jupyter notebook in Ubuntu 18.04.

score -2 · Answer 22 · edited Jul 03 '18 at 07:51

-2

I got a solution:

a) Example Internet:

![image info e.g. Alt](URL Internet to Images.jpg "Image Description")

b) Example local Image:

![image Info](file:///<Path to your File><image>.jpg "Image Description")
![image Info](file:///C:/Users/<name>/Pictures/<image>.jpg "Image Description")

TurboByte

edited Jul 03 '18 at 07:51

Lovepreet Singh

4,792
1
18
36

answered Jul 03 '18 at 06:51

user10025092

11

How do I display local image in markdown?

22 Answers22

Solution for Unix-like operating system.

Working for me ( for local image )

Working for me (absolute url with raw path)

NOT working for me (url with blob path)

Displaying local images in .md file (VSCode reader extension)

Linked

Related