Nuxt3（Nitro）服务端API部署Vercel后如何加载静态图片？

问题原因 #

本地开发时process.cwd()指向项目根目录，能直接读取assets/images下的文件，但部署到Vercel后，Nuxt/Nitro会对项目进行打包，原有的assets目录结构不会保留在部署后的临时目录中，导致通过process.cwd()拼接的路径无法找到文件。

解决方案 #

方案1：配置Nitro Server Assets（推荐） #

通过Nitro的serverAssets配置，将需要在服务端访问的图片标记为服务端资源，确保打包后能被正确读取：

1. 修改nuxt.config.ts，添加serverAssets配置：

export default defineNuxtConfig({
  nitro: {
    serverAssets: [
      {
        baseName: 'images', // 自定义资源标识名
        dir: 'assets/images' // 本地资源目录
      }
    ]
  }
})

2. 在API函数中，使用Nitro提供的工具读取文件：

import { useStorage } from '#imports'

// 读取图片文件并转成base64
const imageBuffer = await useStorage('server:images').getItem('logo2.png')
const base64Str = imageBuffer.toString('base64')
const imageUri = `data:image/png;base64,${base64Str}`

// 插入到PDF中
doc.addImage(imageUri, "png", x, y, logoWidth, logoHeight, "logo", "MEDIUM", 0);

也可以用serverAssetPath直接获取文件路径：

import { serverAssetPath } from '#imports'
import fs from 'fs'

const filePath = serverAssetPath('images/logo2.png')
const base64Str = fs.readFileSync(filePath).toString('base64')
const imageUri = `data:image/png;base64,${base64Str}`

doc.addImage(imageUri, "png", x, y, logoWidth, logoHeight, "logo", "MEDIUM", 0);

方案2：将图片转为Base64直接嵌入代码 #

对于体积较小的图片，可以直接将其转为Base64字符串，避免文件路径问题：

// 替换为你的logo2.png的Base64字符串
const logoBase64 = 'data:image/png;base64,这里替换为实际的Base64内容'

doc.addImage(logoBase64, "png", x, y, logoWidth, logoHeight, "logo", "MEDIUM", 0);

你可以通过在线工具将图片转为Base64，或者在本地用脚本生成。

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