如何将流式图像响应渲染为图像？

Question

我正在使用 meern stack 来制作应用程序。我正在将图像作为流从快递发送作为响应。我用来以流形式发送图像的代码片段类似于下面的示例：

\n\n

const fs = require(\'fs\')\nconst stream = require(\'stream\')\n\napp.get(\'path\',(req, res) => {\n  const r = fs.createReadStream(\'path to file\') // or any other way to get a readable stream\n  const ps = new stream.PassThrough() // <---- this makes a trick with stream error handling\n  stream.pipeline(\n   r,\n   ps, // <---- this makes a trick with stream error handling\n   (err) => {\n    if (err) {\n      console.log(err) // No such file or any other kind of error\n      return res.sendStatus(400); \n    }\n  })\n  ps.pipe(res) // <---- this makes a trick with stream error handling\n});\n

\n\n

在反应中，我使用 axios 获取它。该代码片段类似于下面的代码：

\n\n

 url = "route or path here";\n                    axios.get(url)\n                        .then(res => {\n                            console.log(res.data);\n                            console.log(typeof (res.data));\n                        }).catch((err) => {\n                            console.log(err);\n                        }); \n

\n\n

我收到的回复是乱码，我完全无法解释。它的类型是字符串。\n它看起来如下所示：

\n\n

\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdExifII*\xef\xbf\xbd\xef\xbf\xbdDuckyP\xef\xbf\xbd\xef\xbf\xbd/http://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c145 79.163499, 2018/08/13-16:40:22        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CC 2019 (Windows)" xmpMM:InstanceID="xmp.iid:21A02ACAA70511E984DCC4EF8BF6CCE2" xmpMM:DocumentID="xmp.did:21A02ACBA70511E984DCC4EF8BF6CCE2"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:21A02AC8A70511E984DCC4EF8BF6CCE2" stRef:documentID="xmp.did:21A02AC9A70511E984DCC4EF8BF6CCE2"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>\xef\xbf\xbd\xef\xbf\xbdAdobed\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd     \n\n\n\n    \xef\xbf\xbd\xef\xbf\xbd\n    \xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd    \n            !1AVQa"\xef\xbf\xbd\xef\xbf\xbdq\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd2\xef\xbf\xbd\xef\xbf\xbdt\xef\xbf\xbd\xef\xbf\xbdU7BR\xef\xbf\xbd\xef\xbf\xbd#S\xef\xbf\xbd\xef\xbf\xbd4\xef\xbf\xbd5u\xef\xbf\xbd\xef\xbf\xbd6v   \xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdbr\xef\xbf\xbd3s\xef\xbf\xbd$Te\xef\xbf\xbd\xef\xbf\xbdW\xef\xbf\xbd\xef\xbf\xbdc8C\xef\xbf\xbd%F\xef\xbf\xbdG9\xef\xbf\xbd\xef\xbf\xbdgwX\xef\xbf\xbdD\xef\xbf\xbd&\xef\xbf\xbd\xef\xbf\xbd\'  !1AQq\xef\xbf\xbd2a\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd"R\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdr\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd3Ss45Bb\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd#cT\xef\xbf\xbdD\xef\xbf\xbdC\xef\xbf\xbd$\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd?\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdx\xef\xbf\xbdS\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdJ+\xef\xbf\xbd\xef\xbf\xbdd_\xef\xbf\xbd\n    \xef\xbf\xbde\xef\xbf\xbdb\xef\xbf\xbd\xce\x84[\xef\xbf\xbdM\xef\xbf\xbd\xef\xbf\xbd1\xef\xbf\xbd\xef\xbf\xbd8\xef\xbf\xbdS}iEx7\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdB-\xef\xbf\xbd*\xef\xbf\xbd\xef\xbf\xbd22##\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\n    \xef\xbf\xbd\xef\xbf\xbde\xef\xbf\xbd\xef\xbf\xbd\\pO\xef\xbf\xbd\xef\xbf\xbd]=\xe3\x85\x9b\xef\xbf\xbdO\xef\xbf\xbd\xef\xbf\xbd-\xef\xbf\xbd\xef\xbf\xbd\xd6\x9d\xef\xbf\xbdW+AH\xef\xbf\xbdM\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdd\xef\xbf\xbdp\xef\xbf\xbdevmht\xef\xbf\xbd\xef\xbf\xbd4\xef\xbf\xbd\xef\xbf\xbdp\xef\xbf\xbdy\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdR\xef\xbf\xbd\xef\xbf\xbdDt5\xef\xbf\xbd(~`\xef\xbf\xbd\xef\xbf\xbdF\xcd\x9e\xef\xbf\xbd\xdf\x9c\xef\xbf\xbd%\xef\xbf\xbdi\xef\xbf\xbd\xef\xbf\xbdCIu\xef\xbf\xbd\xee\xab\x82\xef\xbf\xbdC\xef\xbf\xbd2\xef\xbf\xbd\\J\xef\xbf\xbd.3    <-\xef\xbf\xbdnt\xef\xbf\xbd\xef\xbf\xbdr-iBT\xef\xbf\xbd\xef\xbf\xbd%)*\xef\xbf\xbdG\xef\xbf\xbdB\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdn\xdc\xaeIF*\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd^\xef\xbf\xbd%Q--I/\xef\xbf\xbd\xef\xbf\xbd_\xef\xbf\xbd0\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd!\xef\xbf\xbd{\xef\xbf\xbd5\xef\xbf\xbd\xef\xbf\xbd{\xef\xbf\xbd\xef\xbf\xbdOI\xef\xbf\xbdq\xef\xbf\xbd\xef\xbf\xbd%\xd1\xa2*\xef\xbf\xbd\xef\xbf\xbde(2)\xef\xbf\xbd\xef\xbf\xbdB]\xef\xbf\xbd^\xef\xbf\xbd{\xef\xbf\xbdj\xef\xbf\xbd\xef\xbf\xbdm<\xef\xbf\xbd^\xef\xbf\xbd%Q--I\xef\xbf\xbdm\xef\xbf\xbd\xef\xbf\xbd^\xef\xbf\xbd\xef\xbf\xbdv^\xef\xbf\xbd\\\xef\xbf\xbd{\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdI\xef\xbf\xbd-<\xc9\xbc\xd2\xb7\xef\xbf\xbdDu.22*\xef\xbf\xbd\xef\xbf\xbdE$\xef\xbf\xbdQ v\xef\xbf\xbd\xef\xbf\xbdj\xef\xbf\xbd}\xef\xbf\xbdS\xef\xbf\xbd+\xef\xbf\xbd\xef\xbf\xbd3id\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdvm\xef\xbf\xbd\xef\xbf\xbd1\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd\xef\xbf\xbd\xc4\x92\xef\xbf\xbd\xef\xbf\xbd\xd7\xbb\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdW\xef\xbf\xbd\xef\xbf\xbd\xd9\xac\xd2\xa2Y   \xef\xbf\xbd3\xef\xbf\xbd\xef\xbf\xbdW\xef\xbf\xbdT1\xcb\xb3X\xef\xbf\xbdqE4\xef\xbf\xbd\xef\xbf\xbdn\xef\xbf\xbd\xef\xbf\xbdS\xef\xbf\xbd%\xc9\x99K\xef\xbf\xbd&\xdb\x94\xef\xbf\xbdH\xef\xbf\xbd\xef\xbf\xbd\xd3\xae+\n    p\xef\xbf\xbdR\xef\xbf\xbd\xef\xbf\xbd".D^\xef\xbf\xbdAm)\xef\xbf\xbd\xef\xbf\xbd\xc7\x8d\xef\xbf\xbd=\xef\xbf\xbd\xda\x92\xef\xbf\xbd\xef\xbf\xbdW\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd!w=Z\xd6\xb57yfjU"NIT\xef\xbf\xbd\xef\xbf\xbdM\xef\xbf\xbd\xef\xbf\xbd1\xef\xbf\xbd\xcf\xba\xef\xbf\xbd|\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\n\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbda[>\xef\xbf\xbd(xG@\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdg\xef\xbf\xbdV\xcf\xba\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd/\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdY\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdt\xef\xbf\xbdq\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdl\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\n\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbda[>\xef\xbf\xbd(xG@\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdg\xef\xbf\xbdV\xcf\xba\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd/\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdY\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdt\xef\xbf\xbdq\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdl\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\n\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbda[>\xef\xbf\xbd(xG@\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdg\xef\xbf\xbdV\xcf\xba\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd/\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdY\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdt\xef\xbf\xbdq\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdl\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\n\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbda[>\xef\xbf\xbd(\xef\xbf\xbd"\xeb\xa0\xac-6\xef\xbf\xbdSq\xef\xbf\xbd\xef\xbf\xbd]\xef\xbf\xbd5ER\xef\xbf\xbd[\xef\xbf\xbd\xef\xbf\xbd+K\xef\xbf\xbd\xc7\x94`\xda\x93\xef\xbf\xbdLf\xef\xbf\xbdi%C\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd&l\xef\xbf\xbd27V[f\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xd2\x86g\xef\xbf\xbd\xef\xbf\xbd1\xdd\xbd\xc7\xa1jqM\xd2\xafw\xef\xbf\xbd4D\xef\xbf\xbd\xef\xbf\xbdusGq<f\xcb\x8eF\xef\xbf\xbd\xef\xbf\xbdF\xef\xbf\xbd1P\xca\x9e\xef\xbf\xbd|\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdN.\xef\xbf\xbd\xcf\xb3}fj\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd/\xdb\x8cR\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd8\xef\xbf\xbdv\xef\xbf\xbdc.\xef\xbf\xbde\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdb\xef\xbf\xbd\xef\xbf\xbdTFE\xef\xbf\xbd\xef\xbf\xbdI9\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd{\xef\xbf\xbd\xef\xbf\xbd&\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd{\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\x\xef\xbf\xbd\xef\xbf\xbdNv}\xef\xbf\xbd?\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd6\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd{\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbds\xef\xbf\xbd\xef\xbf\xbd$\xef\xbf\xbdg\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdo\xef\xbf\xbd~\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd6\xef\xbf\xbdW/[\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd-\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdS\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd3aH\xef\xbf\xbd  \xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xdd\xb5\xef\xbf\xbd\xef\xbf\xbdT\xef\xbf\xbd\xef\xbf\xbdO\n    v]\xef\xbf\xbd\xc6\xa5\xef\xbf\xbd\xc3\xb7\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd-t\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdIRfG\xef\xbf\xbdH\xef\xbf\xbdt\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd(\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd:\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd=\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdo\xef\xbf\xbd<i\';>\xd0\x9f\xef\xbf\xbdp\xef\xbf\xbd\xef\xbf\xbd{\xef\xbf\xbdc\xef\xbf\xbd\xef\xbf\xbd=\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdj\xef\xbf\xbd\xef\xbf\xbdnE\xef\xbf\xbd\xef\xbf\xbdXY9?6\xef\xbf\xbdn}\xef\xbf\xbd3Z\xef\xbf\xbd\xef\xbf\xbdM*\xef\xbf\xbd&D9b    \xef\xbf\xbd\xef\xbf\xbd)\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdN\xef\xbf\xbd\xef\xbf\xbdE\xef\xbf\xbd\xef\xbf\xbd%ER\xef\xbf\xbd#2\xef\xbf\xbd"\xef\xbf\xbd\xef\xbf\xbdt\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xdd\x82\xef\xbf\xbdp\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\\xef\xbf\xbd_\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbds\xef\xbf\xbd\xef\xbf\xbd  \xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd{\xef\xbf\xbdfO\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd?\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdG\xef\xbf\xbdj\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdj\xef\xbf\xbd/\xef\xbf\xbd\\\xd2\x9e\xef\xbf\xbde1!\xef\xbf\xbdM\xef\xbf\xbdI\xef\xbf\xbd\xef\xbf\xbdd\xef\xbf\xbdW\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd^\xef\xbf\xbd\xef\xbf\xbd#sN\xef\xbf\xbdfy]\xef\xbf\xbd\xef\xbf\xbdg\xef\xbf\xbd\xef\xbf\xbdx\xef\xbf\xbd-=\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdg\xef\xbf\xbd!\xce\x80&Y\xef\xbf\xbd\xef\xbf\xbdVo*4\xef\xbf\xbd\xef\xbf\xbdS\xef\xbf\xbdDk\xef\xbf\xbdbJ^y\xef\xbf\xbd\xef\xbf\xbd[\xc6\xa2A\xef\xbf\xbd+EH\xef\xbf\xbdFe^\nL\xef\xbf\xbd2\xef\xbf\xbd\xef\xbf\xbdY\xef\xbf\xbd\xef\xbf\xbdQjM\xef\xbf\xbd\xef\xbf\xbd-p\xef\xbf\xbd\xca\xba\xef\xbf\xbd\xef\xbf\xbd7\xef\xbf\xbdtSKA\xef\xbf\xbd[\xef\xbf\xbdR3\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdn3\xd6\x8d<\xef\xbf\xbd?\xef\xbf\xbd\xef\xbf\xbd2\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd88\xef\xbf\xbd]  \xef\xbf\xbdMZ$\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd&\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd_L\xef\xbf\xbda\xef\xbf\xbd\xd1\xad\xef\xbf\xbd\'\xef\xbf\xbdq3\xcf\xbf_2Ty>\xef\xbf\xbd?6\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd=\xef\xbf\xbd=\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdI\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdL\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xcc\x87\xef\xbf\xbdO\xef\xbf\xbdO\xcd\xa5\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdfF\xef\xbf\xbd\xef\xbf\xbd~\xef\xbf\xbdg\xef\xbf\xbd~\xef\xbf\xbdd>\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd~m/\xef\xbf\xbd\xef\xbf\xbd{0z5\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd!\xef\xbf\xbdG\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdi}\xef\xbf\xbd3\xd9\x83\xd1\xad\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xdf\xaf\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbdt\xef\xbf\xbd\xef\xbf\xbdK\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdop\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd>\xef\xbf\xbd|\xef\xbf\xbd}S\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdi}\xef\xbf\xbd3\xd9\x83\xd1\xad\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xdf\xaf\xef\xbf\xbd\xef\xbf\xbd|\xef\xbf\xbd}\xef\xbf\xbd~m/\xef\xbf\xbd\xef\xbf\xbd{0z5\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd!\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdop\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd>\xef\xbf\xbd|\xef\xbf\xbd}S\xef\xbf\xbdt~\xef\xbf\xbdr2?\xc9\x95\xef\xbf\xbd8\xef\xbf\xbdt\xef\xbf\xbdgF\xef\xbf\xbd\xef\xbf\xbd?h\xef\xbf\xbd\xef\xbf\xbd\xdf\xaf\xef\xbf\xbd\xef\xbf\xbdm\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd7hj#h\xef\xbf\xbd5\xef\xbf\xbd\xef\xbf\xbdw\xef\xbf\xbdd\xef\xbf\xbdQ\xc9\x93{\xef\xbf\xbd\xef\xbf\xbd;\xef\xbf\xbd(3QR\xef\xbf\xbd<M\xef\xbf\xbd\xef\xbf\xbdw\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd*\xd6\xbc\xef\xbf\xbd\xef\xbf\xbdjut\xef\xbf\xbdu)J\xef\xbf\xbd\xef\xbf\xbdRw\xef\xbf\xbd\xef\xbf\xbd)\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd0\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdz\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd%N\xef\xbf\xbd\xef\xbf\xbd!\xef\xbf\xbdO\xcf\x93\xef\xbf\xbd\xef\xbf\xbdi}\xef\xbf\xbd3\xd9\x83\xd1\xad\xef\xbf\xbd+\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdI\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\\\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xcc\x87\xef\xbf\xbdO\xef\xbf\xbdO\xcd\xa5\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdfF\xef\xbf\xbd\xef\xbf\xbd~\xef\xbf\xbdg\xef\xbf\xbd~\xef\xbf\xbdd>\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd~m/\xef\xbf\xbd\xef\xbf\xbd{0z5\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd!\xef\xbf\xbdG\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdi}\xef\xbf\xbd3\xd9\x83\xd1\xad\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xdf\xaf\xef\xbf\xbd\xef\xbf\xbd<\xef\xbf\xbdt\xef\xbf\xbd\xef\xbf\xbdK\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdop\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd>\xef\xbf\xbd|\xef\xbf\xbd}S\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdi}\xef\xbf\xbd3\xd9\x83\xd1\xad\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdL\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xcc\x87\xef\xbf\xbdO\xef\xbf\xbdO\xcd\x95\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdfF\xef\xbf\xbd\xef\xbf\xbd~\xef\xbf\xbd\xef\xbf\xbd~\xef\xbf\xbdd>\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdI\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdL\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xcc\x87\xef\xbf\xbd>\xef\xbf\xbd?i?6W\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd=\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd}\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xd6\xb4\xda\xad\xef\xbf\xbd;l;E\xef\xbf\xbd*a[\xef\xbf\xbd\xef\xbf\xbd1"\xef\xbf\xbd\xef\xbf\xbdHAqUFfg\xef\xbf\xbdfgS=\xef\xbf\xbd3E(\xef\xbf\xbd#\xef\xbf\xbd\xef\xbf\xbdb\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdJ\xef\xbf\xbd\xef\xbf\xbdqNN\xef\xbf\xbd\xef\xbf\xbd~\xef\xbf\xbdcX\xef\xbf\xbd\xd0\x8d,\xef\xbf\xbd*D\xc7\xb1\xef\xbf\xbd\xd7\xa58\xef\xbf\xbd]&\xef\xbf\xbd\xef\xbf\xbdm\xef\xbf\xbd:\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd%%^"*O\n    m\xef\xbf\xbd:\xef\xbf\xbd=\xef\xbf\xbd\xce\xadAB7\xef\xbf\xbd%EX\xef\xbf\xbd\xef\xbf\xbd.\xef\xbf\xbd_+\xef\xbf\xbdu\xef\xbf\xbd\xef\xbf\xbdt\xef\xbf\xbd\xef\xbf\xbdK\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd)\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdq3\xcf\xbf_2T\xef\xbf\xbdq}+\xef\xbf\xbd0\xcb\x82\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdT\xd2\x99\xee\xa5\xbe\xef\xbf\xbd\xef\xbf\xbdJM\xef\xbf\xbdI<\xef\xbf\xbd\xef\xbf\xbd5\xef\xbf\xbd\xef\xbf\xbd"\xef\xbf\xbd\xef\xbf\xbdaT\xef\xbf\xbd\xef\xbf\xbd\xd7\xb5\xef\xbf\xbd\xef\xbf\xbdik\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdkE\xef\xbf\xbdOw\xef\xbf\xbd*\xef\xbf\xbdd9\xef\xbf\xbd\xef\xbf\xbdG\xef\xbf\xbd.\n

\n\n

我怎样才能在图像中显示它？

\n

Answer 1

经过8个小时的努力，我终于解决了上述问题。首先，axios 不支持 ReadableStreams，所以我最终使用 fetch 来为我获取响应，响应位于 UInt8Array 中，所以我将其转换为 blob，而不是使用 createObjectURL 将其设置为图像标签的 src。以下片段是我使用的。

  (async () => {
                            const fetchedResource = await fetch(url, {
                                method: 'get',
                                headers: {
                             //headers goes here
                                }
                            });
                            const reader = await fetchedResource.body.getReader();

                            var parentComponentInReadClientModal = this;
                            let chunks = [];
                            reader.read().then(function processText({ done, value }) {
                                console.log(parentComponentInReadClientModal);

                                if (done) {
                                    console.log('Stream finished. Content received:')

                                    console.log(chunks);


                                    const blob = new Blob([chunks], { type: "image/png" });
                                    console.log(blob);

                                    parentComponentInReadClientModal.setState({
                                        imagedata: URL.createObjectURL(blob)
                                    });
                                    return
                                }

                                console.log(`Received ${chunks.length} chars so far!`)
                                // console.log(value);
                                const tempArray = new Uint8Array(chunks.length + value.length);
                                tempArray.set(chunks);
                                tempArray.set(value, chunks.length);
                                chunks = tempArray

                                return reader.read().then(processText)
                            })
                        })();