如何在 Nuxt 3 服务器/API 中解决加载静态图片的问题？

2024-03-12 18:19:24

## Nuxt 3 服务器/API 中加载静态图片的解决方案

引言

在构建 Nuxt.js 应用程序时，经常需要在服务器或 API 函数中加载静态图片。然而，直接引用这些图像可能会导致生产环境中出现问题。本文旨在提供一个全面的指南，详细介绍如何使用 Nuxt 3 的服务器 middleware 访问静态图片，从而解决此问题。

问题

当在 Nuxt 3 的服务器/API 中使用 JSPdf 生成 PDF 时，从本地路径直接引用静态图片可能会在部署到生产环境（例如 Vercel）时失败。这通常是因为缺少对静态文件服务的访问权限。

解决方案：使用服务器 middleware

要解决此问题，Nuxt 3 提供了一个服务器 middleware，使我们能够从 API 函数访问静态文件。

1. 创建服务器 middleware

在 /middleware 文件夹中创建一个名为 server-static.ts 的文件，并添加以下代码：

import { defineNuxtPlugin, resolveUnqualifiedPath } from 'nuxt'
import * as fs from 'fs'

export default defineNuxtPlugin(async (nuxtApp) => {
  nuxtApp.provide('serverStatic', (filePath) => {
    const rootDir = resolveUnqualifiedPath(filePath)
    return fs.readFileSync(rootDir, 'utf-8')
  })
})

2. 在 API 函数中使用服务器 middleware

在 API 函数中，我们可以通过注入 serverStatic 服务来访问静态图片：

import { inject } from 'nuxt/app'
const serverStatic = inject('serverStatic')

const data = serverStatic(`/assets/images/logo2.png`)
const uri = "data:" + mime + ";" + encoding + "," + data