部署至Vercel后Eleventy网站图片消失的路径配置问题咨询

我之前也碰到过一模一样的路径坑，核心问题出在本地开发和生产部署的路径解析逻辑差异，加上Eleventy静态资源的复制配置没跟上。下面一步步给你捋清楚解决方法：

1. 先确保Eleventy正确复制静态资源到部署目录 #

首先得让Eleventy把你的图片文件夹打包到最终的_site目录里，不然部署后Vercel根本找不到图片文件。打开你的.eleventy.js配置文件，添加静态资源复制规则：

module.exports = function(eleventyConfig) {
  // 请根据你的项目结构调整路径：
  // 如果static文件夹在/src目录下（和你的源文件同目录），用这行
  eleventyConfig.addPassthroughCopy("src/static");
  
  // 如果static是在项目根目录（不在src里），改成这行
  // eleventyConfig.addPassthroughCopy("static");
};

这一步是基础——没配置的话，Eleventy只会处理模板文件，不会把图片这类静态资源复制到_site里。

2. 改用根相对路径引用图片 #

你本地用static/img/imagename.png能显示，是因为本地开发时页面都在网站根目录（比如localhost:8080/index.html），相对路径能精准指向_site/static/img/...。但如果页面在子目录（比如/posts/my-post.html），或者部署到Vercel后域名的根路径逻辑变化，这种相对路径就会失效。

正确的做法是使用以/开头的根相对路径，示例：

<img src="/static/img/imagename.png" alt="图片描述">

这种路径会从网站的根目录开始查找资源，不管页面在哪个层级，本地开发和Vercel部署时都能准确找到图片。

3. 验证Vercel部署的文件结构 #

部署完成后，你可以登录Vercel控制台，找到对应的部署记录，查看Output目录下的_site文件夹，确认里面存在static/img目录，并且你的图片文件已经被正确复制进去。如果图片没出现在这里，就回到第一步检查addPassthroughCopy的路径配置是否正确。

4. 适配子路径部署（可选） #

如果你的网站部署在Vercel的子路径下（比如https://your-project.vercel.app/blog/），可以通过Eleventy的全局数据动态适配路径：

在.eleventy.js里添加：

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/static");
  // 根据环境设置baseUrl，生产环境用子路径，本地为空
  eleventyConfig.addGlobalData("baseUrl", process.env.NODE_ENV === "production" ? "/blog" : "");
};

然后在模板里这样引用图片：

<img src="{{ baseUrl }}/static/img/imagename.png" alt="图片描述">

这样就能自动适配本地和生产环境的路径差异了。

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