从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

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

// 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 {};
});