如何在@11ty/eleventy-img 中为我处理的图像指定 outputDir？答案

【问题标题】：How to specify outputDir for my processed images in @11ty/eleventy-img?如何在@11ty/eleventy-img 中为我处理的图像指定 outputDir？
【发布时间】：2021-07-19 22:25:33
【问题描述】：

我正在尝试为通过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);
})();

但是当我运行 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

如果没有指定outputDir 选项，它可以正常工作。这是它的文档：https://www.11ty.dev/docs/plugins/image/#output-directory

没有实际的使用例子，但逻辑上应该和widths参数一样传递。

【问题讨论】：

标签： javascript node.js eleventy static-site-generation

【解决方案1】：

我发现了我的错误。我试图用"./img/home/" 传递整个文件夹。相反，我需要传递单个图像，然后它才能工作。

像这样：

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);
})();

【讨论】：