Next.js 13.5.6生产环境动态上传图片渲染失败求助

问题根源 #

开发环境下Next.js会实时监听文件变动，能正常识别动态上传的图片；但生产环境中，Next.js仅会预构建public目录下构建时已存在的静态资源，新增的动态上传文件不在预构建列表内，请求时会返回404页面（text/html类型），导致Image组件抛出资源无效的错误。

解决方案 #

方案1：通过API路由提供动态图片访问 #

将动态上传的图片存放在项目根目录的独立文件夹（比如uploads，不要放在public目录下），然后创建API路由来读取并返回图片资源：

1. 创建API路由文件 app/api/uploads/[filename]/route.ts，代码示例：

import { readFileSync } from 'fs';
import { join } from 'path';
import { NextResponse } from 'next/server';

export async function GET(_request: Request, { params }: { params: { filename: string } }) {
  const filePath = join(process.cwd(), 'uploads', params.filename);

  try {
    const fileBuffer = readFileSync(filePath);
    // 根据文件后缀设置正确的Content-Type
    const ext = params.filename.split('.').pop()?.toLowerCase();
    const contentTypeMap: Record<string, string> = {
      'png': 'image/png',
      'jpg': 'image/jpeg',
      'jpeg': 'image/jpeg',
      'gif': 'image/gif',
      'webp': 'image/webp'
    };
    const contentType = contentTypeMap[ext || ''] || 'application/octet-stream';

    return new NextResponse(fileBuffer, {
      headers: { 'Content-Type': contentType }
    });
  } catch {
    return new NextResponse('文件不存在', { status: 404 });
  }
}

2. 修改图片访问路径：把原本的/uploads/img-example.png改为/api/uploads/img-example.png，Image组件的其他属性无需调整。

方案2：关闭图片优化（快速临时处理） #

如果不需要Next.js的图片优化能力，可以给Image组件添加unoptimized属性，跳过Next.js的图片处理逻辑，直接请求原始图片：

<Image
   width={360}
   height={360}
   src={product.imageUrl}
   alt="Product Image"
   className="object-cover mx-auto"
   unoptimized
/>

⚠️ 注意：此方法会丢失Next.js自动适配设备分辨率、格式转换等优化功能，仅适合临时场景或已自行完成图片优化的情况。

额外检查项 #

• 确认生产环境服务器上的uploads目录存在，且Next.js进程拥有读取该目录文件的权限；
• 验证上传逻辑正常，文件确实被保存到了指定目录，文件名无拼写错误。

内容的提问来源于stack exchange，提问作者Xenon M. Bird