How to specify outputDir for my processed images in @11ty/eleventy-img?

Question

I am trying to specify an output directory for my processed images that run through eleventy-img.

const Image = require("@11ty/eleventy-img");

(async () => {
  let url = "./img/home/";

  let stats = await Image(url, {
    widths: [300],
    outputDir: "./img/processed/",
  });

  console.log(stats);
})();

But what I get is this error message when I run npx eleventy

Unhandled rejection in promise ([object Promise]): (more in DEBUG output)
> Input file contains unsupported image format

`Error` was thrown:
    Error: Input file contains unsupported image format

It works fine without the outputDir option specified. Here is the documentation for it: https://www.11ty.dev/docs/plugins/image/#output-directory

There is no actual example of using it, but logically it should be passed in the same way as the widths parameter.

Answer 1

I found my mistake. I was trying to pass an entire folder with "./img/home/". Instead I need to pass individual images and then it works.

Like this:

const Image = require("@11ty/eleventy-img");

(async () => {
  let url = "./img/home/my-image.jpg";

  let stats = await Image(url, {
    widths: [300],
    outputDir: "./img/processed",
  });

  console.log(stats);
})();