Vercel部署后图片无法加载，但本地localhost可正常显示

核心问题分析 #

你当前的vercel.json路由配置尝试直接映射静态图片路径，但结合@vercel/node构建器的特性，这种配置无法让Vercel正确识别并返回静态文件，导致部署后图片加载失败。

具体修复步骤 #

1. 调整server.js的静态文件处理（以Express框架为例） #

如果你的应用基于Express，必须先挂载静态文件服务中间件，让Node服务直接处理静态资源请求：

const express = require('express');
const app = express();

// 优先挂载静态文件服务，指定public目录为静态资源根目录
app.use(express.static('public'));

// 其他业务路由
app.get('/', (req, res) => {
  res.send('Node Demo on Vercel');
});

module.exports = app;

2. 修正vercel.json配置 #

简化路由规则，确保静态文件请求优先被处理，避免被server.js拦截：

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    // 匹配所有图片格式的请求，直接指向public目录下的对应文件
    {
      "src": "/(.*\\.(png|jpg|jpeg|gif|svg|webp))$",
      "dest": "/public/$1"
    },
    // 其他请求交给server.js处理
    {
      "src": "/(.*)",
      "dest": "/server.js"
    }
  ]
}

3. 检查关键配置细节 #

• 确认前端代码中图片使用绝对路径引用，比如<img src="/images/avatar.png">，而非相对路径（如./images/avatar.png）。
• 检查.gitignore文件，确保没有排除public/images目录，否则部署时图片文件不会被上传到Vercel。
• 重新部署应用：在Vercel控制台触发重新部署，确保新的配置和代码生效。

原生Node.js（无框架）的处理方式 #

如果未使用Express，需要在server.js中手动处理静态图片请求：

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

const server = http.createServer((req, res) => {
  // 处理图片请求
  if (req.url.startsWith('/images/')) {
    const filePath = path.join(__dirname, 'public', req.url);
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(404);
        res.end('Image not found');
        return;
      }
      // 根据文件后缀设置正确的Content-Type
      const ext = path.extname(filePath);
      let contentType = 'image/png';
      if (ext === '.jpg' || ext === '.jpeg') contentType = 'image/jpeg';
      if (ext === '.gif') contentType = 'image/gif';
      if (ext === '.svg') contentType = 'image/svg+xml';

      res.writeHead(200, { 'Content-Type': contentType });
      res.end(data);
    });
    return;
  }

  // 其他请求处理逻辑
  res.writeHead(200);
  res.end('Hello from Node.js');
});

module.exports = server;

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