NextJS项目中从MySQL读取Blob图片失败的解决求助

我正在开发一个项目，尝试从MySQL数据库中读取存储为Blob格式的图片，但图片无法正常显示。以下是相关代码：

products.jsx代码： #

import React from "react";
import Image from 'next/image';
import { useEffect, useState } from "react";
import { StylesContext } from "@material-ui/styles";

export default function Home() {
    const[dataResponse, setdataResponse] = useState([]);
    useEffect(() => {
        async function getPageData() {
            const apiUrlEndpoint = 'http://localhost:3000/api/getdata';

            const response = await fetch(apiUrlEndpoint);
            const res = await response.json();
            console.log(res.products);
            setdataResponse(res.products)
        }
        getPageData();
    }, []);

    return (
        
        <div className='bg-gray-100 min-h-screen'>
            {dataResponse.map((products) => {
                return (
                    <div key= {products.ProductID}>
                        <div>{products.ProductName}</div>
                    <div>
                    <img src={`/${products.ProductImage}`} alt=""/>
                    </div>
                        <div>{products.ProductDescription}</div>
               </div>   
             )
            })}
    </div>
);
}

getdata.js接口代码： #

import mysql from "mysql2/promise";

 export default async function handler(req, res) {
    const dbconnection = await mysql.createConnection({
        host: "localhost",
        database: "onlinestore",
        port: 3306,
        user: "root",
        password: Not showing this here, but the password works.
    });
    try {
        const query = "SELECT ProductID, ProductName, ProductDescription, ProductImage, ProductPrice, DateWhenAdded FROM products"
        const values = [];
        const[data] = await dbconnection.execute(query, values);
        console.log(data);
        dbconnection.end();

        data.forEach((products) => {
            products.ProductsImage = "data:image/webp;base64," + products.ProductImage;
        }
        );
        res.status(200).json({ products: data });
    } catch (error) {
        res.status(500).json({ error: message });
    }

我曾尝试在getdata.js中添加代码将Blob转换为可访问链接，但图片仍无法显示。请问如何解决该问题，让图片正常显示？

1. 修复接口字段名拼写与Buffer转换问题 #

接口中存在两处错误：

• 字段名拼写错误：将ProductImage误写为ProductsImage，导致前端无法拿到转换后的数据
• Blob未正确转Base64：mysql2返回的Blob是Buffer类型，直接拼接会得到[object Buffer]，必须调用toString('base64')转换

修改getdata.js中的循环代码：

data.forEach((product) => {
    product.ProductImage = "data:image/webp;base64," + product.ProductImage.toString('base64');
});

2. 修正前端图片路径写法 #

前端代码中src={/${products.ProductImage}}会把Base64字符串当成服务器路径前缀，这是错误的。直接使用转换后的Base64字符串作为src：

<img src={products.ProductImage} alt={products.ProductName} />

3. 适配图片格式 #

如果存储的Blob不是webp格式，需要修改data:image/webp;base64,为对应格式（比如data:image/jpeg;base64,或data:image/png;base64,）。不确定格式时，可使用通用二进制流格式：

product.ProductImage = "data:image/octet-stream;base64," + product.ProductImage.toString('base64');

4. 修复错误处理bug #

catch块中error: message未定义，应改为error: error.message：

catch (error) {
    res.status(500).json({ error: error.message });
}

5. 可选：优化数据库连接（性能提升） #

建议使用连接池替代每次请求创建新连接，避免频繁连接开销：

import mysql from "mysql2/promise";

const pool = mysql.createPool({
    host: "localhost",
    database: "onlinestore",
    port: 3306,
    user: "root",
    password: "your-password"
});

export default async function handler(req, res) {
    const connection = await pool.getConnection();
    try {
        const query = "SELECT ProductID, ProductName, ProductDescription, ProductImage, ProductPrice, DateWhenAdded FROM products";
        const [data] = await connection.execute(query);
        
        data.forEach((product) => {
            product.ProductImage = "data:image/webp;base64," + product.ProductImage.toString('base64');
        });
        
        res.status(200).json({ products: data });
    } catch (error) {
        res.status(500).json({ error: error.message });
    } finally {
        connection.release();
    }
}

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