Adding images and links to files to Markdown in VS Code

# Adding images and links to files to Markdown in VS Code

To add an image to a Markdown file in VS Code:

Click on the image in Explorer and drag it into your markdown file.
Press Shift and drop the image into the markdown file.

add image to markdown file

Note that you must press Shift to be able to drop the image directly into your markdown file.

Once you hover over the file with the image and press Shift, you'll see multiple dots appear showing on which line the image will be added.

The path to the image is relative to the current markdown file.

You can optionally adjust the alt text on the image after adding it.

You can preview the markdown file by pressing Ctrl + Shift + V (or Cmd + Shift + V on macOS).

preview markdown file

Alternatively, you can:

Press:

Ctrl + Shift + P on Windows and Linux.
Command + Shift + P on macOS.

Note: you can also press F1 to open the Command Palette.

Type markdown preview and select Markdown: Open Preview or Markdown: Open preview to the Side to open the preview window to the side.

open preview

You can also open the preview to the side window by having a markdown file focused and clicking on the magnifying glass icon in the top menu.

click magnifying glass

# Adding images from external URLs

You can also drag and drop an image into your markdown file directly from your browser.

You have to:

Click on the image in your browser and drag it into your markdown file.
Press Shift and drop the image into the markdown file.

add image from browser

The link to the page gets added directly to your markdown file.

example.md

Copied!
![Alt text](http://localhost:3000/images/blog/vscode-add-image-to-markdown/banner.webp)

When previewing images from external URLs, you might have to edit your security settings.

Open the preview to the side window by having a markdown file focused and clicking on the magnifying glass icon in the top menu.

click magnifying glass

Then click on the three dots at the top right of the preview window and click Change Preview Security settings.

change preview security settings

Then update your security settings. For example, you can allow insecure content or allow only local insecure content to be able to view the external image.

update security settings

# Manually adding an image to a markdown file

If the image is located in the same directory as your markdown file, you can use a path such as the following.

README.md

Copied!
![Your Alt Text](./banner.png)

Or the following:

README.md

Copied!
![Your Alt Text](banner.png)

The code sample above assumes that the README.md file and the banner.png image are located in the same directory.

If you have a folder structure like the following:

shell

Copied!
project/
    images/
        banner.png
    README.md

You can add the image to your README.md file as follows.

README.md

Copied!
![Your Alt Text](./images/banner.png)

You can also use the following path.

README.md

Copied!
![Your Alt Text](images/banner.png)

If the name of your image or the path contains spaces, you might have to rename it and remove the spaces to get it working.

If you have to go one directory up, you would use a path prefix of '../'.

For example '../images/banner.png' loads the image from one directory up.

Similarly, to go 2 directories up, you would use a prefix of '../../'.

If manually adding an image from a URL, specify the URL between the parentheses.

example.md

Copied!
![Alt text](http://localhost:3000/images/blog/vscode-add-image-to-markdown/banner.webp)

The URL must point to the image that you want to add to the markdown file.

# Adding a link to another file in Markdown

The same approach can be used to add a link to another file in Markdown.

To add a link to another file in a Markdown file in VS Code:

Click on the file in Explorer and drag it into your markdown file.
Press Shift and drop the file into the markdown file.

add link to another file

The path to the file is relative to the current markdown file.

If you click on the link, you open the other markdown file.

# Adding an image by using an HTML tag

You can also use an HTML tag directly in your markdown file to add an image.

README.md

Copied!
## Bobbyhadz.com tutorial

First line

Second line

Third line

<img src="./banner.webp" alt="my alt text" />

The code sample assumes that there is a banner.webp image in the same directory as your README.md file.

If loading an image from an external URL, specify the link to the image in the src attribute.

README.md

Copied!
## Bobbyhadz.com tutorial

First line

Second line

Third line

<img src="http://localhost:3000/images/blog/vscode-add-image-to-markdown/banner.webp" alt="my alt text" />

The link must point to the image that you want to load.

I've also written an article on How to add a GIF to a Markdown file (Github and Vanilla).

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Adding images and links to files to Markdown in VS Code