Eleventy图片输出位置配置：如何同步图片至对应目录或统一管理

方案一：将图片复制到对应文章的输出目录 #

这种方式能让图片和生成的HTML保持原相对路径，无需修改Markdown里的图片链接。只需在Eleventy配置文件（.eleventy.js）中添加以下逻辑：

const fs = require('fs');
const path = require('path');

module.exports = function(eleventyConfig) {
  // 遍历posts目录下的所有Markdown文件
  const postsDir = path.join(__dirname, 'posts');
  const mdFiles = fs.readdirSync(postsDir).filter(file => file.endsWith('.md'));

  mdFiles.forEach(file => {
    const baseName = path.basename(file, '.md');
    // 支持常见图片格式
    const imageExts = ['png', 'jpg', 'jpeg', 'gif'];
    
    imageExts.forEach(ext => {
      const imageSrcPath = path.join('posts', `${baseName}.${ext}`);
      // 如果对应图片存在，配置传递复制规则
      if (fs.existsSync(path.join(__dirname, imageSrcPath))) {
        eleventyConfig.addPassthroughCopy({
          [imageSrcPath]: `posts/${baseName}/${baseName}.${ext}`
        });
      }
    });
  });

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

编译后，foo.png会被自动复制到_site/posts/foo/目录，和HTML里的src="./foo.png"路径完全匹配，图片即可正常显示。

方案二：统一存放图片并重写链接（推荐） #

把所有图片集中到公共目录，既方便管理也利于缓存，需要两步操作：

1. 配置图片传递复制到公共目录 #

在.eleventy.js中添加：

module.exports = function(eleventyConfig) {
  // 将posts下的所有图片复制到公共目录
  eleventyConfig.addPassthroughCopy('posts/*.{png,jpg,jpeg,gif}');
  eleventyConfig.addPassthroughCopy('posts/**/*.{png,jpg,jpeg,gif}'); // 适配子目录图片

  // 其他配置...
};

2. 重写Markdown中的图片链接 #

通过Markdown渲染钩子修改图片src属性，指向公共目录：

const markdownIt = require('markdown-it');
const path = require('path');

module.exports = function(eleventyConfig) {
  // 自定义Markdown渲染规则
  eleventyConfig.setLibrary('md', markdownIt({
    html: true,
    breaks: true,
    linkify: true
  }).use(function(md) {
    const defaultRender = md.renderer.rules.image;
    md.renderer.rules.image = function(tokens, idx, options, env, self) {
      const token = tokens[idx];
      const src = token.attrs[token.attrIndex('src')][1];
      
      // 仅处理相对路径的图片
      if (!src.startsWith('http') && !src.startsWith('/')) {
        token.attrs[token.attrIndex('src')][1] = `/assets/images/${path.basename(src)}`;
      }
      return defaultRender(tokens, idx, options, env, self);
    };
  }));

  // 之前的传递复制配置...
};

这样Markdown里的![An image](foo.png)会被渲染成<img src="/assets/images/foo.png" alt="An image">，同时图片被复制到_site/assets/images/目录，浏览器能正确加载。

注意事项 #

• 若图片和Markdown不在同一目录，需调整路径判断逻辑
• 可根据需求修改公共目录名称、支持的图片格式

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