为PNG图像提供服务的Axios提供损坏的图像 [英] Axios serving png image is giving broken image

问题描述

我使用Express作为中间件api。一个人点击我的中间件，它点击某个第三方API并返回结果。它可以很好地用于所有其他端点，但创建并服务于PNG的GET端点除外。 因此在方法下返回响应

   _execute = R.curry((reqFunction, req, res) => {
        reqFunction(req, res).
        then(r => {
          res.status(r.status).header(r.headers).send(r.data)
        }).
        catch(err => {
          res.status(err.response.status).header(err.headers).send(err.response.data)
        })
      });

和reqFunction是类似

的方法

  modelDiagram = (req, res) => {
    const headers = req.headers;
    const modelName = req.params['modelName'];
    const endPoint = this.modelDiagramEndPoint + '/' + modelName;
    return this.httpRequests.get(endPoint, headers);
  }

和httpRequests.get方法为

  get = (endPoint, headers) => {
    let options = {
      method: 'GET',
      url: endPoint
    }
    options = this.addHeaders(headers, options);
    return this._send(options);
  }

这个._Send类似于

  _send = (options) => {
    return axios(options);
  };

如果我直接从浏览器点击，则响应如下 "``" �png

IHDRn��7Q� IDATx���oHk����D�ȥ|！H�DD�^)"k"n�̤$H�V뒻�Vж"�+��n-"�[��X񲻝L��լ�[Z�^����lnK&；K���=�9�9z�sʋs�~���g�g��g����gf��l��z��QIcc�dEE�<；��？�YY�վ}�R7！{�����‘O�T�C�x�B�fff��۷UYYٿ8��^�a�������？��92O��L2w�����{���s�nxz��k۝N�r��<；.f���~��N��K�d�����u���3j��u5�����%p6���Sj���ꛎ3>�<；)�M�M�y4���v��ܳ{�|�N������/_���尵�����ϫ���E�[‘���"�x˞ N�gSpCw~��p�[Opr��Φ�F��M@pR8��[�z������ä‘O�g����-+�I7�v�����oW��<；)� X�n��}，4À���H�8�n}}�������8"���À7p�/]��j����h�0g�@Bfપ�Too/������z��mD�，�ɓ�|�p��2；<；=�)�FF；Փ��4 4ó�����8 QF����V� 8���Ḹ8�w�^������v�ڵ��v�ܩ��������ݭˬgx�ۺu���� X@###：��N(�Ο？��o߮6o޼�‘YSS�n߉’|����Tcccx����P���：：Z����h1�v�U~~����Q)))����9�V；�[�n�tAA����U����l+P$O�[��̙3�3׹Z[���|)�ϯ��WIII>>^ |���7o�q�~��R zYT��q��@�]7p2���ZZZ�Ç}v^TT��Feee<；��0�；v�P�����o�U[[�����e�� ���Q������m]]��,//ϻ~EE��3"��ի���<h���[���Έ����;��.Y^��SYY���l�‘X�ն�񤥥��j����4##C/���{��@u�.P{� �Ѹ;7����9�a58����j[���u����3�Ȝ‘��Zu~8��������{���ӧO���IWWW�lc̃����6Z�sIo۶Mϛ�p��ޮӒ’�+��3P[�yH�|e����e���аf�����+鱱1UZZj���N����T}�577���r���F�A����1b�b����R��0�O�拓@e���-�C%&&�mUTTԚO��$e�H1��ӿ���A}A#?��������H�����#�&7bo�%z�̐3/77W�>��#/8�a�a�p�ÀÀ�88:�Hyz�x��[�].�L$|w <55����tvv����z=77���۸HhN��;�_�yV��!�@o�l��ߟ���Y!�!�ppp�C�C����888�!�!�!�pppp�C�C������8zppp��)�>w�����k��[V��N�S��W�X'�zzz/��X���ˇ�-��W" h���l�-�|w�v��������hy06���|�N1Կ�jDM/�����'�����/՝��5��w�[:���Hr�zc �����η�37��C��U����8�a�pNn�C�ƍ�M�ɣ�P����&��a�<�����|�ppp��0�8�a�a�.���xb;u���8���k׮��?�EEE�t��I���*))I��ǫ��]6;;����Ull����Q���3��|��ƍ�zU�.����y���z���W���+�����W�Ѽ�v���RGJJ�ONN���推���！<；]��7ܪ��M[Ғglk�9uꔷ��������kjjt^UU�^>wr�����}&；$$����H�GFF��YYY�.77W�t���d�aɼl�^ZZ�6"�XwϞ=：��@qYY�Η��O�����T�，鼼���CLKKS���A��}���8pi���^xN�Gcݒ�������N���ѣ�u233u~SS�>y����d�?11���dx��9���V-,,�5栵:�#�d{{�NK���1J}:-s��˗��HZ�e~mnn^1?ÜX���9$=66�JKK}�d��tuuu䂓�]�P����VK�$J�l'��y����X�����6�?::��dH4G���P�������B��&s�� Nr���O���� 8�0�0�8�a�a�p��8l'p��V^��t��5�w�ᩩ�/-w���sOWW�빹��t��E�@s:��Y�҇ȳ�n��|�fC,��,$h!�B!����?Ǔ�8���IEND�B� `

但图像已损坏。我尝试了很多方法，比如req.end和显式设置标头，但都解决不了。请指导我

推荐答案

很抱歉回答晚了，但可能有人觉得这种方法更可靠：

axios.get('/path/to/image.png', { responseType: 'arraybuffer' })
.then(response => {
      let blob = new Blob(
        [response.data], 
        { type: response.headers['content-type'] }
      )
      let image = URL.createObjectURL(blob)
      return image
    })

我对此的理解：

1. 当您在选项{ responseType: 'arraybuffer' }中指定时，axios会将response.data设置为ArrayBuffer
2. 接下来创建类似文件的对象-Blob
3. 您可以通过URL.createObjectURL(blob)获得指向BLOB文件的URL，您可以在img标记的src属性中使用

上述article方法应该更快。

这里是jsfiddledemo

更新：

只需了解您可以在选项responseType: 'blob'中指定，这样您就不需要自己创建Blob对象：

axios.get('https://picsum.photos/300/300', {responseType: 'blob'})
.then(response => {
  let imageNode = document.getElementById('image');
  let imgUrl = URL.createObjectURL(response.data)
  imageNode.src = imgUrl
})

Jsfiddledemo

这里axiosissue关于缺少二进制数据操作的文档。在这个comment中，您可以找到我建议的相同方法。您也可以使用FileReaderAPI，在thisStackOverflow评论中可以找到这两种方法的优缺点。

这篇关于为PNG图像提供服务的Axios提供损坏的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！