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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

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

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay