0
209
Viewsconvert weird image characters for use in image src
I get an image by GetObjectCommand in backend (nodejs,express) and then pass to frontend (react) I want to show the image with img tag but data is weird!!!
i can see it in postman :
but in console :
what should i convert it into and how ?
I tried so many solutions(arraybuffer,FileReader,...) but none of them worked.
Is there a problem with my backend code?
backend:
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);
}
});
frontend:
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
·
Juan Pablo Isaza
1 answers
Answer question0
FINALLY i found a way
backend:
const retrieveFile = asyncHandler(async (req, res) => {
try {
const param = {
Bucket: 'my-bucket',
Key: req.params.id,
};
const data = await s3.send(new GetObjectCommand(param));
const { Body } = await s3.send(new GetObjectCommand(param));
res.writeHead(200, {
'Content-Type': 'image/jpeg; charset=UTF-8',
});
Body.pipe(res); //---------------------> image sent to frontend
} catch (err) {
res.json('Error', err);
}
});
frontend:
function blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = function (e) {
callback(e.target.result);
};
a.readAsDataURL(blob);
}
const [imgFromStorage, setImgFromStorage] = useState('');
const getImageFromStorage = async () => {
try {
await axios
.get('/api/storage/retrievefile/sadcat.jpg', {
responseType: 'blob',
})
.then((response) => {
blobToDataURL(response.data, function (dataurl) {
setImgFromStorage(dataurl);
});
});
} catch (err) {
console.error(err);
}
};
.
.
.
<img alt='myimg' src={imgFromStorage} /> //------------------> show image
·
Juan Pablo Isaza
Report
Answer question