Tengo el siguiente código para recuperar datos de mysql. La imagen se almacena como blob en mysql. He leído muchas preguntas sobre cómo mostrar la imagen de blob en reaccionar, pero no estoy seguro de si lo que estoy haciendo es correcto.

 import mysql from "mysql2/promise"; export default async function handler(req, res) { const dbconnection = await mysql.createConnection({ host: "localhost", user: "root", password: "Helo1925", database: "freshbake", }); try { const query = "SELECT * FROM item"; const values = []; const [data] = await dbconnection.execute(query, values); console.log(data); dbconnection.end(); data.forEach((item) => { item.item_image = "data:image/webp;base64," + item.item_image; } ); res.status(200).json({ products: data }); } catch (error) { res.status(500).json({ error: error.message }); } }

El siguiente código muestra los datos. La imagen no se muestra.

 import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Item from "./item"; import { useState, useEffect } from "react"; import img from "../public/images/White700.webp"; export default function Catalog() { const [items, setItems] = useState([]); useEffect(() => { async function getItems() { const apiUrlEndpoint = "http://localhost:3000/api/getitems"; const response = await fetch(apiUrlEndpoint); const res = await response.json(); console.log(res.products); setItems(res.products); } getItems(); }, []); return ( <Container className="container" fluid style={{ width: "100%", height: "100%", }}> <Row> {items.map((item) => ( <Item title={item.item_name} price={item.item_price} image={item.item_image} /> ))} </Row> </Container> ); }

He intentado vincular directamente una imagen (sin usar una imagen de mysql) y funciona correctamente.

visualización de imágenes