Skip to main content

Eleventy Image problem with Netlify's build

Published Tags: English, Eleventy, Netlify.

I host my website with Netlify. I use Eleventy to power the thing.

Version of Eleventy that I use: 3.0.0-alpha.5. Unrelated to this post's problem, I also had to update Netlify's Node version to use the newest version of Eleventy. That might be your problem too.

Long story short

I implemented Eleventy Image (Eleventy Transform way) and Netlify's build step started failing.

I included outputDir: "public/img/" into my config file to get through local build step. Still Netlify's build step was failing.

Reason: I was using the wrong slashes: \ (backwards slash) for inside img tags in my code, so Netlify's build step failed, because of that. I changed those into forward slashes / and it started working again.

Below is the story in longer form, if it will be helpful to somebody else.

Optimizing images

I wanted to optimize my images to get achieve the four 100's score of the Lighthouse test - and to be kinder to slower connections that people might use.

Eleventy provides the Image plugin to make this process automatic. It generates multiple versions of the image that you use on your site and chooses the "most optimized" one (I don't really know what it does, I know it helps).

Using the Image plugin

For my use cases I just wanted to have everything be automatic, so I used the "Eleventy Transform" method. You add the script into your config file and it almost works right away.

I had to add outputDir: "public/img/" to my config file, because otherwise it didn't even build locally.

Netlify starts failing builds

After implementing these, Netlify started failing the builds. Everything worked fine in --serve mode locally, so this was surprising to me.

The error message (in essence) was this over on Netlify's dashboard:

10:25:28 PM: [11ty] 1. Having trouble writing to "public/blog/post-1-my-day-as-a-walrus/index.html" from "./src/pages/blog/post-1-my-day-as-a-walrus.md" (via EleventyTemplateError)
10:25:28 PM: [11ty] 2. Transform `eleventy.htmlTransformer` encountered an error when transforming ./src/pages/blog/post-1-my-day-as-a-walrus.md. (via EleventyTransformError)
10:25:28 PM: [11ty] 3. ENOENT: no such file or directory, stat "src/pages/blog/\images\uploads\post-1-my-day-as-a-walrus\walrus.jpg" (via Error)

The problem piece was this: "src/pages/blog/\images\uploads\post-1-my-day-as-a-walrus\walrus.jpg".

Netlify's build step couldn't figure out what it was supposed to do with the img tag. The reason for the error were the backwards slashes \, which should have been forward slashes /.

Once I changed all the image tags that had that, the problem was solved.