我正在做一个项目，我试着从我的数据库中提取一个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>
);
}

来自API的代码，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);
        d
bconnection.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中添加一些东西，使其成为一个链接，但图像仍然不会出现。