convert weird image characters for use in image src-CodePudding

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

CodePudding user response：

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