Obtengo una imagen de GetObjectCommand en backend (nodejs, express) y luego paso a frontend (reaccionar). ¡Quiero mostrar la imagen con la etiqueta img pero los datos son extraños!

Puedo verlo en cartero : pero en la consola : ¿En qué debo convertirlo y cómo ? Probé tantas soluciones (arraybuffer, FileReader,...) pero ninguna funcionó. ¿Hay algún problema con mi código backend?

back-end:

 const retrieveFile = asyncHandler(async (req, res) => { try { const param = { Bucket: 'my-bucket', Key: req.params.id, }; const data = await s3.send(new GetObjectCommand(param)); data.Body.pipe(res); //---------------------> image sent to frontend } catch (err) { res.json('Error', err); } });

Interfaz:

 const [imgFromStorage, setImgFromStorage] = useState(''); const getImageFromStorage = async () => { try { const { data } = await axios.get( '/api/storage/retrievefile/sadcat.jpg' ); setImgFromStorage(data); //------------------------> image received from backend } catch (err) { console.error(err); } }; . . . <img alt='myimg' src={imgFromStorage} /> //------------------> show image