Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed images #138

Closed
zzart opened this issue Sep 5, 2014 · 10 comments · Fixed by #148
Closed

Embed images #138

zzart opened this issue Sep 5, 2014 · 10 comments · Fixed by #148
Labels
Milestone

Comments

@zzart
Copy link

zzart commented Sep 5, 2014

According to the docs

mkdocs.yml
docs/
    CNAME
    index.md
    subpage.md
    img/
        screenshot.png
index.md
![Screenshot](img/screenshot.png)

This is all good if you adding images to index.md

Now let's consider subpage:

subpage.md
![Screenshot](img/screenshot.png)

This image isn't found as server wants it to be in subpage/img/screenshot.png ??
So this forces invalid markup which doesn't work with other MD engines!

subpage.md
![Screenshot](../img/screenshot.png)
@dnrce
Copy link
Contributor

dnrce commented Sep 14, 2014

👍

@d0ugal
Copy link
Member

d0ugal commented Oct 7, 2014

The problem, is that subpage.md moves to subpage/index.html and thus the relative location of the img is incorrect. To fix this I think we need to infer an abolute location (by resolving the relative one to the .md file) and then use for image links.

However, AFAICT, this will involve processing and re-writing the HTML which would get messy.

Any better ideas?

@d0ugal d0ugal added this to the 0.10.0 milestone Oct 7, 2014
@tomchristie
Copy link
Contributor

I'm confused. As far as I'm aware we do infer the correct relative location, which when translated into a URL will differ depending on if it was a link from subpage.md or index.md.

To fix this I think we need to infer an abolute location

I can't see why we'd need to be moving away from the current relative URLs, although if they're currently incorrectly generated for non-index pages then that needs fixing of course.

@d0ugal
Copy link
Member

d0ugal commented Oct 7, 2014

How should an image be added on subpage.md? Given the structure above? Maybe we just need to document this better, I don't fully understand but requiring people to put "../" seems wrong when that extra level isn't there in the source files.

@tomchristie
Copy link
Contributor

Yup indeed - the source should be marked up as ![Screenshot](img/screenshot.png) in both cases, but the translation to HTML should render different links in each case, including the required .. in one case but not in the other. As far as I was concerned we're handling both cases correctly when we translate them into relative URLs, but haven't checked lately.

@d0ugal
Copy link
Member

d0ugal commented Oct 7, 2014

Right, so I tested this and confirmed the issue. I'll investigate the fix. I'm not sure which bit of the code is responsible for this yet.

@gipi
Copy link

gipi commented Apr 27, 2021

Sorry if I comment on this closed issue, but this situation with nested pages and images is not working with mkdocs 1.1.2 and I cannot find useful info in the documentation; in my case I have

nav:
- Home: index.md
- Computer:
  - Hardware: hw.md
  - Embedded Systems:
    - General: embedded/index.md
    - Microcontrollers: embedded/micro.md

where inside embedded/micro.md there is an image with path images/STM32-pinout.png but it's not rendered since the final path is not adapted to match the layout of the repo, indeed the mkdocs serve complains with

WARNING - Documentation file 'embedded/micro.md' contains a link to 'embedded/images/STM32-pinout.png' which is not found in the documentation files..

@martinbira
Copy link

@gipi Paths are not absolute. If your images folder is placed in your docs folder where the folder embedded is at the same level (docs, docs/images, and docs/embedded), the link should go to ../images/STM32-pinout.png.

@benutz
Copy link

benutz commented May 10, 2021

I had the same problem where mkdocs just would not find the images in my media folder. The problem was my file endings. While I was linking to ./media/image.png in the markdown file the actual image had the file ending .PNG.

@waylan
Copy link
Member

waylan commented May 10, 2021

This issue was closed 6.5 years ago. The code which controls this has been rewritten multiple times since this issue was opened. Do not rely on the comments in this issue for current behavior. The current behavior is documented here. If you have any issues with the current documentation, then please open a new issue.

@mkdocs mkdocs locked as resolved and limited conversation to collaborators May 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants