Having trouble translating blob file into image on NextJS App from MySQL Database

So I'm working on a project and I'm trying to pull an image that's a blob file in my database. But the image is not coming up.

Code for the first file, 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>
);
}

Code from 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 });
    }

Does anyone know how to get this to work? How to get the image to appear?

I tried to add in something to my getdata.js to make it a link, but the image still won't appear.

As a general rule, storing images in your RDBMS is not a good idea. It causes database bloat, and the file system is a database specifically designed for serving files. Add to that, the base64 encoding of your images, to pass them in your JSON response, causes a ~33% increase in the size of the transmitted data. That said, I will answer your question.

Unless your image is already base64 encoded when stored in the database, you appear to have forgotten to encode it.

products.ProductsImage = "data:image/webp;base64," + products.ProductImage;

should be:

products.ProductImage = "data:image/webp;base64," + products.ProductImage.toString('base64');

And

<img src={`/${products.ProductImage}`} alt=""/>

can be just:

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