ARTICLE AD BOX
Issue
I am using eleventy-img and eleventyImageTransformPlugin to process my image assets for a static site.
When I npx eleventy --serve to localhost, my images display as expected, but when I deploy my _site folder to the web, the images do not display at all. The rest of the website works as I would expect it to.
My configuration for the eleventyImageTransformPlugin is as follows:
eleventyConfig.addPlugin(eleventyImageTransformPlugin, { formats: ["avif", "webp", "svg", "auto"], failOnError: false, htmlOptions: { imgAttributes: { loading: "lazy", decoding: "async", } }, sharpOptions: { animated: true, }, });Relevant dependencies:
"@11ty/eleventy": "^3.1.2", "@11ty/eleventy-img": "^6.0.4",The code I am writing to display images looks like this:
<img src="../assets/images/about/Image-Name.webp" alt="alt text">When my images display on localhost, the generated code typically looks like this:
<img src="/.11ty/image/?src=assets%5Cimages%5Cabout%5CImage-Name.webp&width=350&format=webp&via=transform" alt="alt text" loading="lazy" decoding="async" width="350" height="350">None of the images that are optimized by eleventyTransformImagePlugin seem to even make it into the _site folder when I build locally. I think this could be a source of the issue, but nothing I've tried so far has resolved this either.
What I have tried
I have tried clearing .cache, deleting the _site folder locally so that it's contents would completely regenerate from scratch and I also set failOnError to true, making sure to resolve any outstanding issues. Despite this, I have been unable to replicate this issue locally, or resolve the issue with the deployed site.
At one point, I assumed that the issue would be with the src, as I do not have a .11ty folder within my site folder. Though I thought this would fail because of the extra parts of the src that were being generated (.webp&width=350&format=webp&via=transform ). Following this idea, I changed my eleventyTransformImagePlugin settings to include outputDir: "_site/@11ty/image/" . This did place images in the expected folder, but did not make a difference to the issue, so the setting was removed.
The url in my metadata file is set correctly, so that isn't causing the issue.
I've been following tutorials and documentation and I had gotten the impression that uploading the files from the _site folder to the host should work without issue, but I feel like I am missing something here.
