Image path when adding file to mkdocs

[WilliamPrvz]

I haven't fully understood how image path are handled in mkdocs. I have a standalone filename.md file that have images at the path:
filename/media/image1.png

It is displaying the image correctly.

But when I import both those file in mkdocs in the same folder under docs. I get 404 error for those images.

"GET /Subfolder/filename/filename/media/image1.jpeg HTTP/1.1" code 404

I don't understand why this time filename is repeated twice.

Of course if I remove the path as follow:
media/image1.png
Then the images are found and displayed correctly.

[kamilkrzyskow]

Hello @WilliamPrvz,
all paths inside the Markdown files are relative to the path where the Markdown files actually is.
So if your file.md is inside this structure:

docs/subfolder/filename/file.md

and has a path to an image like this

![image_alt](filename/media/image.jpeg)

then the path will be resolved relatively as:

docs/subfolder/filename/filename/media/image.jpeg

what it does is basically:

docs/subfolder/filename/ + filename/media/image.jpeg

---

You didn't provide a full example, but assuming the filename is a sort of root, then you'd use

![image_alt](media/image.jpeg)

to create

docs/subfolder/filename/media/image.jpeg

or

![image_alt](../media/image.jpeg)

to create

docs/subfolder/media/image.jpeg

[WilliamPrvz]

Hello @WilliamPrvz, all paths inside the Markdown files are relative to the path where the Markdown files actually is. So if your file.md is inside this structure:

docs/subfolder/filename/file.md

My .md file path is:

docs/subfolder/file.md

I don't understand why it is adding "file" as a folder in the path:

docs/subfolder/file/file/media/image.jpg

[WilliamPrvz]

I put a screenshot of my workplace so you could understand better the issue I got.

[WilliamPrvz]

Ok, after investigation the issue arise because of the html. Without html it works fine. Not sure how to solve this.

[kamilkrzyskow]

I recommend not using HTML image tags as they're not being processed by MkDocs, they're just copied over without validation.
You can use attr_list to add all elements like in your example:

• https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists

![General Warning...](images/media/image1.jpeg){: style="width:0,5in; ..." }

---

If you're really set on using the static img tags, then be aware of how this setting works:

• https://www.mkdocs.org/user-guide/configuration/#use_directory_urls

It's true by default, so every page URL in the rendered page ends with /, so it adds a new layer to the path structure.
So to access the file in this context you need to escape the top level directory via ../, so in your case ../images/media....

You can also set the above setting to false in your mkdocs.yml file and the URLs will end with a .html

[kamilkrzyskow]

Basically look at the final paths using your browser developer tools, and you'll see what is happening.