967

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)

3
  • 15
    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). Commented Sep 1, 2020 at 19:54
  • 14
    ![image](files://C:/Users/jzhang/Desktop/Isolated.png) Commented Sep 12, 2022 at 17:44
  • 3
    Encode space as %20. See github.com/alanshaw/markdown-pdf/issues/54 Commented Apr 13, 2024 at 6:42

23 Answers 23

964

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.

Sign up to request clarification or add additional context in comments.

10 Comments

@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.
For anyone wondering how to add to change the image size. The following command should work: <img src="Isolated.png" alt="isolated" width="200"/>
@jb12n thats HTML not MD.
@bytedev HTML is perfectly fine in Markdown.
@9769953 that's just the application allowing HTML. HTML is HTML and MD is MD :-)
|
477

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

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

2 Comments

![image info](pictures/image.png) also works
Plus spaces will be with %20 like path/to/image dir/place -> path/to/image%20dir/place
91

Solution for Unix-like operating system.

STEP BY STEP :
  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.

5 Comments

What is the path of that "Images" folder? Did you add it to any config in vscode?
@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.
ensure no spaces in filename
I don't think this solution is UNIX-like only..
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.
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.

Comments

27

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 Comment

This doesn't seem to work in Eleventy version 2..0.1. Regardless of how I put it in (and the image directory is copied to the output directory) it doesn't want to load the image.
22

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

1 Comment

I do agree on the pieces of advice but, technically, brackets and spaces in file names are allowed if URL encoding is used, as in ![image (2).png](image%20%282%29.png).
21

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.

Comments

14

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

2 Comments

Only this worked for me on VSCode markdown display
This is good also for specifying other parameters like width or height ..
14

Just add the relative image file route from the markdown file

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

Comments

10

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/

1 Comment

Doesn't work for me without the file:// prepended, as shown in the domih's answer here.
10

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

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

The path can be relative an absolute too (the example use relative). The above assume 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 Readme.md (../ one directory up, Resources/ within Resources folder, Arthur.jpg this image):

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

2 Comments

why is it ![alt text](...) and not ![image](...)
@ShepBryan Updated the answer. In short, those are user defined values, you can use "image" too, but "superhero flying above the clouds" would be more meaningful if the image is about a superhero who is flying high in the sky.
9

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)

1 Comment

I had success with the blob path, when accessing the image from a MD file hosted on github.
7

In Jupyter Notebook Markdown, you can use

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

1 Comment

Pro: added HTML customization using <img > tag
6

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

Comments

5

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.

Comments

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.

Comments

4

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

Comments

2

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

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

1 Comment

Probably the only way to show images on both local Jupyter Notebooks and Github renderer when the images are not placed in the same directory.
2

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.

Comments

2

I recently needed to add images to a README.md file in Github. The image can be reference via the repository root path.

Note: I used a standard image tag because the markdown syntax doesn't play well with tables.

Github repository structure:


repo/
  - src/
    - branding/
      - README.md
      - doc-assets/
        - MAB-8942-Before.png
      

In the README.md file:

<img src="/src/branding/doc-assets/MAB-8942-Before.png" alt="Before image">

Comments

1

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

Comments

1

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.

2 Comments

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
@Shanteshwar Although phrased as a problem, this offers a working solution to the question asked.
-3

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.