Rendering of images failed

[Sayam753]

Hi @danielfrg
Thanks a lot for this library. I wanted to discuss the issue long time back. But I completely forgot about this. Here I go -

If I have an image in the same directory as that of my notebook, the image is rendered using markdown syntax in the notebook but fails to show up in the mkdocs site.

And I get 404 error of Image not found because mkdocs is looking for the image in the path including my notebook's name. As an example -

$ tree .
.
├── docs
│   ├── img.png
│   └── inference.ipynb
└── mkdocs.yml

$ mkdocs serve
404 GET /inference/img.png 

Now, I am wondering how my notebook's name gets added to the path for finding the image. Is this expected behaviour or am I missing something? Please help in this regard.

More interestingly, this is not the case if I render the image from markdown file. As a workaround, I uploaded the picture on GitHub and used that link to render both in notebook and mkdocs.

[afeld]

As a not-ideal workaround, I added

use_directory_urls: false

to the configuration, which fixed it.

[danielfrg]

The solution is what afled commented.

Another option is to have the images in another dir inside the docs one, for example I usually do img/post-slug/img.png
and I include those in the notebook with

![alt](/img/post-slug/img.png)

[abadithela]

Hi, I'm trying to use the method suggested by @danielfrg above but the image still does not render. I created a separate folder in docs called imglib and put all my figures there. The docs folder also contains my Jupyter notebook at the following directory: case_studies/evaluating_perception/simple_script.ipynb . This case studies folder in docs is actually a symbolic link to the case studies folder that is located in the same directory as docs. I'm trying to render simple_script.ipynb that tries to print an image from the imglib folder but the figure does not render in my browser. Specifically, this is the error I get when I run make docs-serve:

INFO     -  [21:53:55] Serving on http://127.0.0.1:8000/gear/
WARNING  -  [21:53:58] "GET /gear/javascripts/mathjax.js HTTP/1.1" code 404
WARNING  -  [21:53:58] "GET /imglib/simple_case_study_fig2.png HTTP/1.1" code 404
WARNING  -  [21:53:58] "GET /imglib/simple_case_study_fig2.png HTTP/1.1" code 404

[giturra]

Hi!

I'm having the same problem that @abadithela, any suggestions?

[abadithela]

@giturra I rendered in the Jupyter notebook using matplotlib. It's not the greatest but it works:

import matplotlib.pyplot as plt
import matplotlib.image as mpimg

%matplotlib inline
fig, ax = plt.subplots()
img = mpimg.imread('imglib/autonomy-stack.png')
imgplot = ax.imshow(img)
ax.xaxis.set_visible(False)
ax.yaxis.set_visible(False)
plt.show()

A better alternative is to use Python commands:

from IPython.display import Image
Image("imglib/autonomy-stack.png")

[zoldello]

The issue with using use_directory_urls: false is that it added ".html" to the end of web pages. If that is not acceptable, then the question is still opened.

If you set use_directory_urls: true and your notebooks are not in docs folder, you have an new issue where the directory of the images is different between local development and the generated site/ folder for the site.