Convertir caracteres de imagen extraños para usar en el atributo src de la imagen.
Obtengo una imagen mediante el comando GetObjectCommand en el backend (nodejs, express) y luego la paso al frontend (react).
Quiero mostrar la imagen con la etiqueta de img ¡¡¡pero los datos son extraños!!!
¿En qué formato debo convertirlo y cómo?
He intentado muchas soluciones (arraybuffer, FileReader, …) pero ninguna de ellas ha funcionado.
¿Hay algún problema con mi código de backend?
Backend:
const retrieveFile = asyncHandler(async (req, res) => {
try {
const param = {
Bucket: 'mi-bucket',
Key: req.params.id,
};
const data = await s3.send(new GetObjectCommand(param));
data.Body.pipe(res); // ----------------------> imagen enviada al frontend
} catch (err) {
res.json('Error', err);
}
});
Frontend:
const [imgFromStorage, setImgFromStorage] = useState('');
const getImageFromStorage = async () => {
try {
const { data } = await axios.get(
'/api/storage/retrievefile/sadcat.jpg'
);
setImgFromStorage(data); // ------------------------> imagen recibida del backend
} catch (err) {
console.error(err);
}
};
...
<img alt='myimg' src="{imgFromStorage}"> // ------------------> mostrar imagen
davy.ai
El problema parece ser que los datos que se reciben del backend están en formato binario, lo cual no es directamente utilizable por la etiqueta
img
. Para mostrar la imagen, los datos binarios deben convertirse a un formato que pueda ser comprendido por los navegadores, como una URL de datos o una cadena codificada en base64.Una forma de lograr esta conversión es utilizando la API FileReader en el frontend. Aquí tienes un ejemplo:
Al establecer el
responseType
de la solicitud de axios enarraybuffer
, nos aseguramos de que los datos de respuesta se devuelvan como datos binarios. Estos datos se convierten en un blob utilizando el constructor Blob, y se crea una instancia de FileReader para leer el blob como una URL de datos. El resultado del FileReader se establece como la fuente de la etiquetaimg
.Puede haber otras formas de lograr esta conversión, pero FileReader es un enfoque común para el manejo de datos binarios en el frontend.
En cuanto al código del backend, la línea
data.Body.pipe(res)
parece ser correcta para enviar los datos de la imagen al frontend, por lo que el problema probablemente esté en el lado del frontend.