Eleventy构建静态博客时图片找不到，求助路径配置方案

核心问题定位 #

当前错误ENOENT: no such file or directory, stat 'content/images/flag-blur-unsplash.jpg'是因为eleventy-img插件默认从当前模板文件所在目录（content/blog/）查找相对路径图片，但你的公共图片实际存放在/public/images，路径匹配逻辑不匹配导致找不到文件。

分步解决方案 #

1. 配置路径解析规则 #

在Eleventy配置文件（eleventy.config.js）中引入Node.js内置的path模块，修改插件配置并添加resolvePath回调，区分公共图片和文章内图片的查找路径：

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

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
        extensions: "html",
        formats: ["webp", "jpeg"],
        defaultAttributes: {
            loading: "lazy",
            decoding: "async",
        },
        // 自定义路径解析逻辑
        resolvePath: (src, inputPath, options) => {
            // 处理公共图片：以/images/开头的绝对路径，映射到项目根目录下的public/images
            if (src.startsWith("/images/")) {
                return path.join("./public", src);
            }
            // 处理文章内图片：相对路径，映射到当前文章模板所在目录的相对位置
            return path.join(path.dirname(inputPath), src);
        }
    });

    // 其他Eleventy配置...
};

2. 修正页面图片引用方式 #

• 公共图片：在布局文件中使用绝对路径引用，示例：

  <img src="/images/flag-blur-unsplash.jpg" alt="图片描述文本" />
  

• 文章内图片：假设文章模板位于content/blog/posts/my-post.njk，图片放在content/blog/posts/my-post/images/photo.jpg，则在文章中使用相对路径引用：

  <img src="./images/photo.jpg" alt="文章图片描述" />
  

3. 可选：优化图片输出路径（避免文件冲突） #

如果希望将优化后的图片分类存放，可添加outputDir和urlPath配置，确保生成的图片路径清晰无冲突：

// 在插件配置中新增以下内容
outputDir: (src, inputPath, options) => {
    if (src.startsWith("/images/")) {
        // 公共优化图片输出到 _site/images/optimized
        return "./_site/images/optimized";
    }
    // 文章优化图片输出到对应文章目录下的 images/optimized
    const postRelativeDir = path.relative("./content", path.dirname(inputPath));
    return path.join("./_site", postRelativeDir, "images/optimized");
},
urlPath: (src, inputPath, options) => {
    if (src.startsWith("/images/")) {
        return "/images/optimized/";
    }
    const postRelativeDir = path.relative("./content", path.dirname(inputPath));
    return `/${postRelativeDir}/images/optimized/`;
}

4. 验证与调试 #

• 执行npx @11ty/eleventy --serve启动开发服务器
• 检查构建日志是否无报错
• 查看_site目录下是否生成了优化后的图片文件
• 在浏览器中打开页面，确认图片正常加载，检查img标签的src属性是否指向正确的优化图片路径

内容的提问来源于stack exchange，提问作者mack