Using images

[amr66]

I'm wondering if it's possible to display images referenced in the MD document. In my case they are saved relative to the document, like this:

![My fancy Image](img/image01.png)

[MercySpectures]

Yes, it is possible to display images referenced in a Markdown document when the images are saved relative to the document. The Markdown syntax you have used is correct. Here’s how you can ensure the images display correctly:

1. Correct Path: Make sure the path to the image is correct relative to the location of your Markdown file. For example, if your Markdown file is in the root directory of your project and the image is in an img folder within the same directory, the path img/image01.png is correct.

2. File Structure: Verify that the image files are indeed located in the specified directory and the filenames match exactly, including the extension and case sensitivity.

3. Markdown Preview: If you are using a Markdown editor or a viewer (like Visual Studio Code, GitHub, or a static site generator like Jekyll), the images should render automatically if the paths are correct.

Here’s an example of a typical project structure:

project-folder/
│
├── img/
│   └── image01.png
│
└── document.md

And in document.md, you would reference the image like this:

![My fancy Image](img/image01.png)

Common Issues and Solutions

Image Not Displaying

1. Path Issues: Double-check the path to the image. The path must be relative to the location of the Markdown file.
2. File Extension: Ensure the file extension is correct (e.g., .png, .jpg) and matches the actual file.
3. Case Sensitivity: File paths on some systems are case-sensitive, so ensure the filename case matches exactly.

Viewing on Different Platforms

• Local Editors: Most Markdown editors like Typora, Visual Studio Code, and others will render the images if the paths are correct.
• GitHub: If you are viewing the Markdown file on GitHub, make sure the images are committed to the repository and the paths are relative to the Markdown file.
• Static Site Generators: If you are using a static site generator like Jekyll or Hugo, ensure the images are placed in the correct directory as per the generator’s structure and configuration.

Example Markdown Content

Here is a sample content in a Markdown file (document.md):

# My Document

Here is an image:

![My fancy Image](img/image01.png)

Some more content here.

Ensure the directory structure matches and the image file (image01.png) exists within the img folder.

Conclusion

If you follow these guidelines and ensure the paths and filenames are correct, the images should display correctly in your Markdown document across various platforms and editors.