转换奇怪的图像字符以在图像 src 中使用

Question

我在后端（nodejs，express）通过 GetObjectCommand 获取图像，然后传递给前端（反应）我想显示带有 img 标签的图像，但数据很奇怪！！！

我可以在 postman 中看到它：但是在 console 中： 我应该将它转换成什么以及如何转换？我尝试了很多解决方案（arraybuffer、FileReader、...），但其中 none 有效。我的后端代码有问题吗？

后端：

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);
  }
});

前端：

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

Answer 1

终于找到方法了

后端：

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);
  }
});

前端：

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

转换奇怪的图像字符以在图像 src 中使用

convert weird image characters for use in image src

javascript

image

amazon-s3

axios

src