How can I keep images in public folder, but use them within posts?

[marcosscriven]

Thanks for your work on 11ty! Amazing project, and works really nicely with Cloudflare Pages.

I see there's a directory in this project with a keep file: https://github.com/11ty/eleventy-base-blog/tree/main/public/img

If I put images in there, the only way I can access them from within a sub-directory of content, is something like this:

<img src="/../../../myimage.webp">

In the base blog as is, it seems to assume that images are either in the same dir as the post (such as https://github.com/11ty/eleventy-base-blog/tree/main/content/blog/fourthpost - so called 'relative'), or in the root of content (so called absolute)

If they are in _site/public (due to https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.js#L18), the only way for the img tag to produce a valid path is with multiple ../ parent paths to break out of the nested content/ dir.

I asked in Discord #help, and I see there are a few similar questions/confusions around this, without a solution.

• https://discord.com/channels/741017160297611315/1347273254494142578
• https://discord.com/channels/741017160297611315/1344409194165436458