Escribí una API que devuelve una foto en respuesta a una solicitud. En el lado del cliente, obtengo esta imagen y trato de representarla como una imagen de fondo para mi elemento. Pero la imagen no se mostrará. No estoy seguro de si el problema radica en la API del servidor o en mi enfoque de lectura de archivos. Comentarios abajo. Estoy usando Node.js, Express y axios para hacer esto.

Leí muchas recetas en Internet sobre cómo enviar imágenes y renderizarlas y terminé con el siguiente código.

API del servidor (nodo):

 router.get('/photo', getProfilePhoto) function getProfilePhoto(req, res, next) { const { userId } = getUserIdAndTokenFromRequest(req); const projectRootDir = path.dirname(require.main.filename); const filePath = path.join(projectRootDir, '..', 'files', 'main_profile_photos', `${ userId }`, 'main_profile_photo.jpg'); console.log('filePath', filePath); res.sendFile(filePath, (err) => { console.log(err) next(); }); }

Cliente

 async getUserMainInfo(userId) { const data = {}; const photoRes = await ax.get( `http://localhost:3000${ FILE_READER_RELATIVE_URL }/photo` ); console.log('photoRes', photoRes); const blob = new Blob([ photoRes.data ], { type: 'image/jpeg' }); const reader = new FileReader(); return new Promise(resolve => { reader.onload = () => { data.photo = reader.result console.log('reader.result', reader.result); resolve(data); } reader.readAsDataURL(blob) }); },

En el cliente, recibo los siguientes datos:

ax aquí es axios importado tal cual desde el módulo axios . Aquí convierto los datos recibidos en base64 para aplicar la cadena resultante ( data.photo ) como imagen de fondo para un elemento. Pero la imagen no parece aparecer. Traté de convertir la cadena base64 resultante en una imagen utilizando algunos servicios en Internet y descubrí que el resultado no es una imagen en absoluto. Verifiqué dos veces esto usando el convertidor de imagen a base64 y noté que el resultado es diferente de lo que obtengo en el cliente.

Resultado de la conversión del cliente:

 data:image/jpeg;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQD...

Convertidor de imagen a base64:

 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wC...

Teniendo en cuenta lo anterior, terminé con dos suposiciones en las que estoy atascado:

1. El archivo no se envía correctamente desde el servidor Node.
2. Estoy analizando los datos recibidos de forma incorrecta.

La pregunta es: ¿dónde me equivoco?