从 Nuxt 3 REST API 路由返回图像

Question

我有一个简单的 API，用于获取图像、转换图像并返回新图像。我目前可以返回图像的 base64 字符串表示形式，但是如何将其作为实际图像返回，仅在浏览器中呈现？

例如，如果我在浏览器中输入此链接，它会正确呈现图像。我希望能够用我自己的 URL 作为前缀（例如，用于测试

https://localhost:3000/api/images/remote/[URL]

并让它以相同的方式返回图像。

目前我可以使用下面的代码返回新图像的base64字符串：

const response = await fetch(URL)

// do transformations

const arrayBuffer = await response.arrayBuffer()
const buffer = Buffer.from(arrayBuffer)
const base64 = buffer.toString("base64")

return base64

这会生成一个字符串，我可以在

<img>

标记中将其成功呈现为 base64。我怎样才能将它作为一个图像对象返回，它只会在浏览器中呈现，即不作为 base64 字符串？

我意识到这可能就像在响应上正确设置标头并返回一个 blob 一样简单，但我在谷歌搜索（广泛）时画了一个空白。

Answer 1

我假设您指的是 nuxt 项目中的 /server 目录以获取 API？因为我需要一个服务器路由来检索需要访问令牌的缩略图：

// file: ../server/api/thumbnail/[filename].get.js
export default defineEventHandler( async (e) => {
    const { filename } = e.context.params;

    try {
        const token = await getToken();

        const blob = await $fetch(`${BASE_URL}/resources/thumbnails/${filename}`, {
            headers: {
                "Token": token
            }
        });

        const arrayBuffer = await blob.arrayBuffer()
        const buffer = Buffer.from(arrayBuffer, 'base64')

        return buffer;
    }
    catch (err) {
        console.error(err);
    }

    return {};
});