How do I display local image in markdown?
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Markdown is a lightweight markup language with plain-text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor. In the context of displaying local images using Markdown, the process is straightforward but there are several nuances that one should be aware of.
Displaying Local Images in Markdown
To display an image in Markdown, you use the following syntax:
Here, "Alt text" serves as the alternative text description of the image for scenarios where the image cannot be displayed. This is followed by the path to the image you want to display, enclosed in parentheses.
Local Paths and Their Differences
When specifying the path to a local image, you can use either an absolute or a relative path:
- Absolute Path: This specifies the image location in relation to the root directory of the file system.Example:
- Relative Path: This specifies the image location in relation to the location of the Markdown file. This is generally more portable and is preferred when sharing Markdown files between systems.Example:
GitHub Flavored Markdown (GFM)
If you are using Markdown on GitHub, be aware that GitHub has its own version of Markdown known as GitHub Flavored Markdown (GFM) which simplifies the embedding of images. It works similarly, but it's good to remember that paths can be relative to the repository.
Embedding Image with HTML
In cases where you need more control over the image display than Markdown typically allows (like setting image dimensions), embedding HTML directly into your Markdown is a viable option:
Tables in Markdown
Markdown also supports tables for presenting data in a structured format. Below is a sample table that covers the basic syntax used to display images in Markdown:
| Syntax | Description |
 | Basic syntax to embed an image. |
./images/logo.png | Example of a relative path. |
/Users/username/image.jpg | Example of an absolute path. |
<img src="..." alt="..."> | HTML syntax for more control. |
Additional Considerations
When working with markdown, especially if the markdown files are meant to be viewed on platforms like GitHub or Bitbucket, it is important to understand the platform-specific enhancements and limitations. Always test how images render on these platforms, as behavior can slightly differ from standard Markdown interpretations.
Moreover, working with images is not just about displaying them, but also about making your documentation accessible. This means that providing meaningful alternative text for images is crucial for viewers who depend on screen readers and for situations where the image cannot be rendered.
Using Markdown to display local images is simple and effective, and can significantly enhance the readability and aesthetic appeal of your documents. By understanding the basics and some advanced aspects of Markdown image embedding, users can create more functional and visually appealing content.

