如何转换从 S3 存储桶检索到的流以将其用作我的 React 前端中的 jpeg 图像？

Question

我有一个非常具体的问题，似乎在整个互联网上都得到了解答，但我现在已经花了 2 天时间试图解决它，不幸的是我就是做不到。这是我的问题：

我在私有 S3 存储桶中有许多 jpeg 文件。我想将其保密并将这些文件提供给我的 React 前端，因此签名 url 不是一个选项，并且使存储桶 public 不是一个选项。
我有一个节点。js/express后端。我设置了一个路由，使用 AWS SDK 的函数 getObject() 从 S3 存储桶中检索 jpeg 文件。没问题，这部分设置工作正常，因此无需进一步研究这部分。
然后我从我的 React 前端用 Axios 调用这个路由。然后我得到一个返回的对象，我的问题开始了。我收到的对象如下所示：

��JFIF��

.!!.)1(%(1)I9339ITGCGTf[[f�z��

.!!.)1(%(1)I9339ITGCGTf[[f��z��Jp"��z��Rբ��@BD��"I$��mU �UR��D$��I$趭�UZR��/S�?g0�BDI$��t[V��JQ@��ז9��y��^�DD"$� $��T��)@(��;��0��k��@@AHDH��Uj��&l��!" I#�j�UUB��q�%�n�e�/��!"H�N�V��JP(?zL� ��uc��=��( A!"Io��Z��)J(��~7��u��z<��?|��H@DB"$��F��V��UE(�� =N罽[7厝:y��1��w��P�`A!�D��7�V�QJR��㟝�z}�tvl��} _��H�"H��mU�� U��痱��l��t��p��=Z|��6��Sd��@��"$H��t-��)E��´l��{v�� f:<��y��A��"I��J*��~]��?_��>��.]\z5x��}��DI $��TP(?��7O��f��ٷ��<��;��@A

等等等等，字符串明显要长很多

从网上的所有阅读来看，我似乎明白这是一个流，为了在我的 React 前端显示为 jpeg 图像，需要将其转换为 Base64，并且此转换的结果需要是用作 .这个对吗？我已针对此问题尝试了多种解决方案，但 none 有效。这是我尝试过的一个示例，它与我在网上看到的所有其他解决方案非常相似，none 其中有效：

let buf = Buffer.from(rsp.data)
let base64 = buf.toString('base64')
let convImage = <img src={`data:image/*;base64,${rsp.data}`} alt='' />
// And then render convImage

我花了很多时间试图解决这个问题，这似乎是一个很简单的问题，但我就是想不通。我将不胜感激任何帮助来完成我正在尝试做的事情。问题：

我上面的例子应该有效吗？为什么不呢？我做错了什么，我不理解什么？
我是否误解了这些概念，我应该以不同的方式来做吗？

谢谢

Answer 1

我终于自己解决了这个问题。解决方案与我在网上看到的大多数建议的方向不同，我在这个 URL 中找到了它： https://simplernerd.com/js-image-binary-jfif/

我将这些行添加到我的代码中，我通过 Axios 收到的响应现在可以显示在我的 React 前端中：

axiosClient.get(route, {responseType: 'blob', params})  // had to add responseType to the axios config
    
    .then((rsp) => {
        const url = URL.createObjectURL(rsp.data) // where rsp is the response
        var image = <img src={url} alt='' /> // <img/> can now use the url object to display the image, and var image can now be rendered by React            
    }

    .catch((err) => {
        console.log('Error receiving rsp')
    })

如何转换从 S3 存储桶检索到的流以将其用作我的 React 前端中的 jpeg 图像？

How do I convert a stream retrieved from S3 bucket to use it as jpeg image in my React frontend?

html

jpeg

amazon-s3

reactjs

axios