Next.js API中Img对象Base64路径错误修复求助

问题核心 #

你碰到的关键问题是路径处理逻辑错误：

• 直接使用public文件夹内的相对路径（比如/1.jpg）给Node.js的fs模块读取，fs会以当前执行目录为基准，无法定位到正确文件
• 错误提示指向.next/static/media路径，但开发阶段应该读取public里的原始文件，而非构建后的产物；生产环境下public资源会被哈希重命名，直接读取构建后路径也不可靠

具体解决步骤 #

1. 修正路径拼接方式

用process.cwd()获取项目根目录的绝对路径，再拼接public文件夹的路径，确保fs能精准定位到图片文件。

2. 改用Node.js内置能力完成转换（可选，更稳定）

可以抛弃base64-img第三方库，直接用Node.js内置的fs和Buffer实现Base64转换，减少依赖带来的潜在问题。

修改后的代码 #

import { imagesPath } from "@/testdata/imagesArray";
import fs from 'fs/promises'; // 使用Promise版fs，适配async/await语法

export default async function getFile64s(){
  const result = [];
  const projectRoot = process.cwd(); // 获取项目根目录的绝对路径

  for (const file of imagesPath) {
    // 处理路径：去掉开头斜杠，拼接项目根目录+public路径
    const absolutePath = `${projectRoot}/public/${file.src.replace(/^\//, '')}`;
    const image64 = await convertToBase64(absolutePath);
    
    result.push(image64);
  }

  return result;
}

async function isPathValid(path) {
  try {
    await fs.access(path);
    return true;
  } catch (error) {
    console.error('路径不存在:', path);
    return false;
  }
}

async function convertToBase64(filePath){
  const isValid = await isPathValid(filePath);
  if (!isValid) throw new Error(`文件不存在: ${filePath}`);

  // 用内置模块完成Base64转换
  const fileBuffer = await fs.readFile(filePath);
  // 根据图片后缀判断MIME类型，可自行补充其他格式
  const mimeType = filePath.endsWith('.jpg') || filePath.endsWith('.jpeg') 
    ? 'image/jpeg' 
    : filePath.endsWith('.png') 
      ? 'image/png' 
      : 'image/webp';
  return `data:${mimeType};base64,${fileBuffer.toString('base64')}`;
}

额外注意点 #

• 如果imagesPath里的src已经是public下的相对路径（比如images/1.jpg，无开头斜杠），则去掉.replace(/^\//, '')这部分逻辑
• 生产环境构建后，Next.js会对public资源做哈希重命名，若需要在构建后处理图片，建议在构建前就完成Base64转换并存入数据库，避免路径匹配问题
• Windows系统的路径分隔符为反斜杠，但Node.js的fs模块支持正斜杠，用正斜杠拼接路径不会出现兼容性问题

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