NetlifyCMS + Eleventy + eleventy-img works locally but optimized images don't get created on netlify

Support
1

Netlify Sitename: https://cwn-static.netlify.app
Custom domain: cookingwithnothing.com

I have migrated my girlfriend’s blog from WordPress to netlify with NetlifyCMS and Eleventy Frontend. Exported all posts into markdown etc, got all the featured images and so on. I am using @11ty/eleventy-img to optimize the original images during the build process, so that optimized jpg and .avif files in several sizes are created.

When I build my site locally with ‘npm run dev’ OR with ‘netlify dev’ the images get created with no errors.

But when I upload a new image in NetlifyCMS on my Content Manager and trigger a build by publishing the post, the post is updated with the correct markup, but the optimized images are never created. There is also no error message in the build process.
Here’s a testpost where this happened: https://cwn-static.netlify.app/try-again/ (404 Error for the images, they don’t exist)
Here’s the file where eleventy-img is used on github: CWN-netlifycms-eleventy/imageShortcode.js at main · saiminh/CWN-netlifycms-eleventy · GitHub
And the NetlifyCMS config: CWN-netlifycms-eleventy/config.yml at main · saiminh/CWN-netlifycms-eleventy · GitHub

Any help is hugely appreciated! This is kinda difficult to debug for me because it ONLY happens on Netlify Deploy and there’s no error message anywhere, so if you have any tipps on just how to better debug this issue it’d also be very helpful already!

Thank you in advance and Kind Regards,
Simon

2

@schweinedog You mention that it works fine with npm run dev or netlify dev and that the error only happens on Netlify… but have you tried running the build command locally?

The develop mode of all site generators isn’t a great comparison to their build modes, the best way to see what will happen on Netlify is just to run the actual build locally and look at the resulting files, or navigate into the output directory and run npx serve.

3

Hi @nathanmartin Thank you for your reply!
Yes, sorry I should have mentioned, it’s the same with build commands (npm run build and netlify build), locally the images are created fine…
There’s actually no log for the images that ARE created either, I just see them appear in the /optimized folder. If I intentionally try to make the image optimization process fail by changing the src path of the image to something non-existent, then the errors appear right after the eleventy command is executed…

Thankful for any more suggestions!!!

4

Solution:

It was my mistake, I had configured eleventy-img to save the generated optimized images in a subfolder of static (/img/optimized). This folder does copied into the build via .addPassthroughCopy(), but I guess this happens BEFORE the images are generated, so they never exist in _site…
Changing the outputDir to ‘_site/img’ solved the problem!

Thank you!