从 NextJS 中的 API 响应渲染图像 - 只需下载 base64 文件

Question

我正在做一个新项目并学习 ReactJS。我已经将 base64 中的图像保存到 MySQL 数据库中，现在我正在尝试执行 GET 请求，以便图像显示在浏览器中而不是被下载，但是，尽管它尝试下载文件，文件只是一个包含 base64 字符串而不是实际图像的文件。

数据库中的文件如下所示（只是base64的片段）

data:image/png;base64,iVBORw0KGgoAAAA

获取图片的API如下：

export default async function handler(req : NextApiRequest, res : NextApiResponse) {
    const prisma = new PrismaClient()

    if (req.method === "GET")
    {
        const {image_id} = req.query;
        const image = await prisma.images.findFirst({
            where: {
                imageId: parseInt(image_id)
            }
        });
        const decoded = Buffer.from(image.content).toString("base64");
        console.log(decoded)
        res.status(200).send(decoded);
    }
    else
    {
        res.status(405).json(returnAPIErrorObject(405, "Method not supported by API endpoint"));
    }
}

我修改了 next.config.js 以提供包含以下内容的自定义 header 响应：

module.exports = {
    async headers() {
        return [
            {
                source: '/api/images/:image_id',
                headers: [
                    {
                        key: 'Content-Type',
                        value: 'image/png:Base64'
                    }
                ]
            }
        ]
    }
}

如前所述，当我转到 URL http://localhost:3000/api/images/4（4 是图像 ID）时，它会下载一个包含数据库中 base64 字符串的文件，而不是显示图像在浏览器中。

更新

根据@sean w 的评论中的 link，它现在尝试显示图像，但不显示实际图片，它只显示空白 window 和一个白色方块如下图所示。

我的代码现在如下所示：

        const {image_id} = req.query;
        const image = await prisma.images.findFirst({
            where: {
                imageId: parseInt(image_id)
            }
        });

        const decoded = Buffer.from(image.content, 'base64').toString();

        let imageContent = decoded.replace(/^data:image\/png;base64,/, '');

        console.log(decoded);

        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Length': imageContent.length
        });
        res.end(imageContent);

下面的屏幕截图显示了页面上实际呈现的内容，而不是我的实际图像。

Answer 1

我已经解决了这个问题，而不是从我认为看起来像 Prisma 的数据库创建缓冲区，因为该列是一个 blob 无论如何都给了我一个缓冲区。，我首先从数据库中提取 base64 字符串并从字符串中删除数据：image/png;base64，然后从该字符串创建一个缓冲区并将其发送给响应：

const {image_id} = req.query;
        const image = await prisma.images.findFirst({
            where: {
                imageId: parseInt(image_id)
            }
        });

        const decoded = image.content.toString().replace("data:image/png;base64,", "");
        const imageResp = new Buffer(decoded, "base64");

        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Length': imageResp.length
        });
        res.end(imageResp);

从 NextJS 中的 API 响应渲染图像 - 只需下载 base64 文件

Rendering image from API response in NextJS - just downloads base64 file

api

base64

image

next.js