[eleventy-plugin-local-respimg] Relative img src

[scastiel]

Hi, thank you for this plugin it’s truly awesome!

The issue is with relative src attributes for images. If I have this:

<!-- File src/posts/my-post.html -->
<img src="image.png">

With this in 11ty config:

dir: { input: 'src', output: '_site' },

And this in the plugin config:

folders: { source: 'src', output: '_site' },

The files are correctly generated (in _site/posts) but in the resulting HTML, I get references to posts/image***, instead of either image*** or /posts/image***, so the image is not displayed.

I made it work with a dirty workaround, by making generateSrcSet always return an absolute path:

function generateSrcset(sizes, src, type) {
  return sizes.map(s => `/${replaceExt(src, `.${s}.${type}`)} ${s}w`).join(', ');
  //                     ^
}

It goes without saying that this is not a clean way to proceed 😅, but I had to do it to use the plugin…

[scastiel]

Note: the exact trick I used to make the plugin work in that situation in case anyone needs it is way dirtier. In .eleventy.js:

// Dirty patch so the plugin handles relatives path correctly.
const helpers = require('eleventy-plugin-local-respimg/lib/helpers')
helpers.generateSrcset = (sizes, src, type) => {
  return sizes
    .map((s) => `/${src.replace(/(\.[^.]+)$/, `.${s}.${type}`)} ${s}w`)
    .join(', ')
}
const pluginLocalRespimg = require('eleventy-plugin-local-respimg')

[Snugug]

Relative images are…hard as them successfully being displayed is really dependent on how the URL gets structured. Converting to an absolute URL is the only reliable way that I know of to always ensure it's pointing to the correct place. 11ty/buildawesome#789 is also required in order to truly support relative images.

All that said, I'll mull over what you've got here and see if I can come up with a good solution for the time being.