Netlify部署的11ty站点图片无法生成，本地运行正常

针对你的场景（本地11ty Image正常生成图片，Netlify部署时失效），可以从以下几个方向排查修复：

1. 确保Sharp依赖在Netlify环境正常安装 #

11ty Image依赖Sharp进行图片处理，Netlify的Linux构建环境需要匹配兼容的Sharp版本：

• 在package.json中明确指定Sharp版本（比如"sharp": "^0.32.6"），避免自动安装的版本与Netlify环境不兼容。
• 确保@11ty/eleventy-img是最新稳定版，避免版本适配问题。

2. 修正图片路径与输出目录配置 #

• 绝对路径处理：Netlify构建时的工作目录可能与本地不同，将图片路径转为绝对路径避免找不到文件：

  const path = require('path');
  
  // 在短代码中修改src路径
  const absoluteSrc = path.resolve(__dirname, src);
  let metadata = await Image(absoluteSrc, {
    // 原有配置
    outputDir: "./_site/images/", // 改为输出到11ty的站点目录
    urlPath: "/images/"
  });
  

• 输出目录调整：将outputDir设为./_site/images/，确保生成的图片直接进入11ty的最终输出目录，部署时会被包含进去。

3. 添加Passthrough Copy复制原始图片 #

如果Decap CMS上传的原始图片存放在images/目录，需要让11ty将该目录复制到输出目录，否则构建时找不到源文件：

// 在.eleventy.js中添加
eleventyConfig.addPassthroughCopy("images");

4. 检查Netlify构建配置 #

• 确认Netlify的构建命令为生产模式（比如npx @11ty/eleventy），不要使用开发模式的--watch参数。
• 查看Netlify构建日志，搜索是否有Sharp安装失败、图片路径不存在等错误信息，这是定位问题的关键。

5. 调整缓存策略（可选） #

11ty Image默认缓存处理结果，但Netlify构建环境是临时容器，缓存无法持久。可以禁用缓存强制每次构建重新处理：

let metadata = await Image(src, {
  // 其他配置
  cacheOptions: {
    duration: "0s" // 禁用缓存
  }
});

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