DEV Community

Cover image for MS-SQL, React, Fetch ... Mostrar imagen desde un campo tipo Imagen
Daniel Yafacb
Daniel Yafacb

Posted on

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

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".

Image description

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:

Image description

Esto ratifica que el Blob funciona ...

Image description

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more