Pelican image links break when viewing article through "categories"

Question

I am sure I'm missing something obvious. I'm defining Categories through folder names inside the content folder. If I click content while viewing a page, I see folder names (e.g. categ1, categ2) plus 'misc', that's fine. When I click categ1, I see one complete article but the image links are now all broken.

localhost:8000/category/categ1.html

What I would like to see is just a click-able list of articles in that category. Or at the very least, not broken links.

(I have similar behavior if I try to use tags, but one thing at a time...)

There are no category lines in the .rst files.

Besides name, timezone etc. I am using these in my configuration.

UPDATE: Images are in the Images folder in Content. I've also put a copy of Images folder in categ1, but no help.

THEME = 'nmnlist' 

PATH = 'content'

# ARTICLE_PATHS = ['articles']    # have tried this also

STATIC_PATHS = ['images', 'pdfs']

RELATIVE_URLS = True  # have tried False also

PLUGINS = ["render_math"]

Answer 1

It sounds like this might be a problem with image URLs being relative.

The Problem

If this is the case, suppose you have a Markdown page in content/mypage.md that is generated into localhost:8000/mypage.html, and it has a (working) reference to an image:

![Alt text](content/myimage.png)

which is rendered into the html:

<img src="content/myimage.png" />

and points to localhost:8000/content/myimage.png. However, if you then try and process that same Markdown into HTML for a categories page, it will render the same image markdown:

![Alt text](content/myimage.png)

into the same html:

<img src="content/myimage.png" />

but since this is on the categories page at localhost:8000/categories/mycategory.html, this relative image URL now points to localhost:8000/categories/content/myimage.png and the image is broken on categories and tags pages.

The Solution

The solution is simple: one /. Use absolute references to images in your Markdown by prefixing them with a /: instead of using content/myimage.png, use /content/myimage.png:

![Alt text](/content/myimage.png)

That will always render the image at localhost:8000/content/myimage.png, regardless of what page it is on.

Answer 2

The content-folder is the input-side. After applying the pelican pelicanconfig.py-command the output-side is generated in the output-folder. I think that any pathes for rendering has to fit the output-side at the end. I use a content/images-folder and this is copied by the pelican pelicanconfig.py-command completely to the output/images-folder.

I had to modify the proposed solution. Using my structure of the folders, it works for me when I set in the md-file:

![png5](../images/image5.png)

With .. we get from the post-folder a level higher to the output-folder and from there to the images-folder.

Appendum : I have elaborated a different solution here that works from Pelican 3.5 on and later.