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

[DeaJae]

I get what you are trying to say as I have the same issue.
I want all my images in /public/img and output to /img/.
Going by EleventyImg/Transform's documentation we should be able to use /filename.ext as the path, but this is not the case as it attempts to load C;/location/content/filename.ext.
I'm guessing there is some prefix we are missing, and not documented, as V8 had a fair few switches for image paths checking, but that was through a shortcode.

I'll spin up a new test project tomorrow from scratch to see if just us, if that fails i'll test this Relative Url Filter, and probably try adding eleventyimg v6 into the mix.

[DeaJae]

Okay, Relative url fix did not work.
But putting the image into /content/ (what we don't want) works for the example, which then outputs it to _site/img/ (what we want).
Looking it up a bit further, /content/ is set as 'input' in eleventyconfig.js, changing these to the defaults (listed next to them) seem to cause more issues as it breaks on output.
Maybe adding a imageInput option there in the future and calling it in url like src="{{imageInput}}/filename.ext", but I'm not clever enough for that yet.

But really, that document example needs to be a bit clearer.

[ischmidls]

I'm having a similar issue, where only the relative paths work, and they only work locally. On deploy to GH Pages, the images do not work at all.

[whitwaltman]

I found a less-than-ideal workaround. It seems to work in all cases that I've tested, but I haven't exhausted all possibilities.

In each directory data file, add a front-matter key that stores the relative path of that sub-directory. For example, in content.11tydata.js, I added path: "../..". Similarly, in blog.11tydata.js, I have path: "../../.." (since blog is nested 1 directory deeper than content).

Then, inside whichever file or post you want to display an image, use <img src="/{{ path }}/img/screenshot.png" alt="a screenshot of my desktop">. This assumes that you placed screenshot.png or whatever file you're using inside of public/img. If you want to reference a different file inside the a different public sub-directory, e.g. public/pdf, you would use /{{ path }}//pdf/name_of_your_file.pdf.

It should be noted that any usage of this workaround must have a leading / before the {{ path }} variable. Even if you set your path in your directory data file to be something like "/../..", you still need a forward slash before including the path variable because the generated output removes the leading slash. In my testing, examining the source of a page showed that the generated output of the index page was as follows: <img src="../../img/screenshot.png" alt="test">, even with the path variable set to /../..

TL;DR
You can fix it by adding a path variable to your directory data file (which makes it accessible as front matter). For the content directory, path should be ../... In blog, path should be ../../... Then, to add an image stored in public/img/, you can do

• <img src="/{{ path }}/img/screenshot.png">
• ![alt text](/{{ path }}/img/screenshot.png)