Eleventy - 无法在构建中找到图像

Question

我正在使用 eleventy 构建一个静态博客。我已设置布局，但在显示图像时遇到问题。我正在使用 11ty 3.0.0-alpha.10 和 @11ty/eleventy-img 版本 4.0.2。我正在尝试使用插件页面上提到的转换方法，但我无法正确获取图像文件的路径。当我尝试构建网站时出现错误：

[11ty] 1. Having trouble writing to "./_site/blog/index.html" from "./content/blog.njk" (via EleventyTemplateError)
[11ty] 2. Transform `eleventy.htmlTransformer` encountered an error when transforming ./content/blog.njk. (via EleventyTransformError)
[11ty] 3. ENOENT: no such file or directory, stat 'content/images/flag-blur-unsplash.jpg' (via Error)
[11ty] 
[11ty] Original error stack trace: Error: ENOENT: no such file or directory, stat 'content/images/flag-blur-unsplash.jpg'

这是我在布局中引用图像的方式

<img src="./images/flag-blur-unsplash.jpg" alt="" />

我尝试了很多不同的途径，但都没有成功。

这就是我设置图像插件的方式（与插件页面上的相同）：

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
    // which file extensions to process
    extensions: "html",

    // Add any other Image utility options here:

    // optional, output image formats
    formats: ["webp", "jpeg"],
    // formats: ["auto"],

    // optional, output image widths
    // widths: ["auto"],

    // optional, attributes assigned on <img> override these values.
    defaultAttributes: {
        loading: "lazy",
        decoding: "async",
    },
});

我尝试使用不同的输出选项配置插件，但最终出现了相同的错误。

我想要一个布局，其中包含使用普通 img 标签引用的特定图像，然后有一个博客文章部分，其中包含嵌套在博客文章中的图像。因此，一些图像将位于 /public/images 中，而其他图像将嵌套在 /blog/posts/this-is-a-post 中。这两种类型的图像都会显示在博客文章页面和网站的首页上，我只是不知道如何引用它们！

接下来我可以尝试什么？

Answer 1

在 _site 中创建图像文件夹。将您的图像放在那里并使用“../images/image.jpg”到达正确的路径。