MS-SQL, React, Fetch … Mostrar imagen desde un campo tipo Imagen

This content originally appeared on DEV Community and was authored by Daniel Yafacb

No es una gran idea el tener un campo de base de datos donde se almacene una fotografía o cualquier otro tipo de archivo. Pero como programador uno debe adaptarse a las necesidades en cualquier escenario.

A continuación la estructura de los datos. Se asume que luego se ha creado un procedimiento almacenado llamado APL_WEB_TRABAJADOR_FOTO el cual devuelve el campo llamado “imagen”.

Backend: Al devolver los datos desde backend, este debe ser usando .send, como este ejemplo:

export const getPersonalFoto = async (req, res) => {
const cnServidor = await getConnection();
const result = await cnServidor
.request()
.input("CODTRAB", sqlRef.VarChar, req.params.codtrab)
.query("EXEC APL_WEB_TRABAJADOR_FOTO @CODTRAB");
res.send( result.recordset[0].imagen );
};

Frontend: Primero debemos comprobar que nuestro Backend funciona correctamente, para esto, usaremos Postman y aquí muestro el resultado que debería tener un parecido a lo siguiente:

Esto ratifica que el Blob funciona …

This content originally appeared on DEV Community and was authored by Daniel Yafacb