如何使用NestJs从外部API返回一个简单的图像?

huangapple go评论93阅读模式
英文:

How to return a simple image from external API using NestJs?

问题

I see that you're having trouble with handling binary image data from an external API. It seems like you want help with this issue. Here's the translated part of your message:

问题似乎是您在处理外部API返回的二进制图像数据时遇到了困难。您似乎希望在这个问题上获得帮助。

If you need assistance with this problem, please provide more specific details about the issues you're facing, and I'll do my best to assist you.

英文:

I've been using this new framework for a while and it's pretty funny to code with , but I got in trouble and i'm stuck, so here I am asking for some help 如何使用NestJs从外部API返回一个简单的图像?

My problem is pretty common I guess in another frameworks or languages. I need to get an image from an external API, I'm calling to the following URL for example :

https://s2.coinmarketcap.com/static/img/coins/32x32/1.png

But there is a little problem, in my final app I don't know what is the id of the image im looking for, see that on the end of the above url there is a number + ".png" this number is the id of the cryptocurrency in this case. So , if I want to get this logo/image knowing only the name of the cryptocurrency I have to query to another URL and search for it's ID, well that's not a problem, and I actually achieved it pretty easy:

public getImageByName(name: string): Observable<any> {
    return this.fetchCMCFullData()
      .pipe(
        map(entry => {
          return Object.keys(entry)
            .map(entradaKey => {
              return entry[entradaKey];
            })
            .find(valorMapeado => valorMapeado.slug == name);
        }),
      )
      .pipe(
        mergeMap(resultado =>
          this.httpService
            .get(
              'https://s2.coinmarketcap.com/static/img/coins/32x32/' +
                resultado.id +
                '.png',
              {
                headers: {
                  'Content-Type': 'image/png',
                },
              },
            )
            .pipe(map(response => response.data)),
        ),
      );
  }

As you may understand, the "fetchCMCFullData" returns me the data needed to get the id of the crypto and then I query for it's image, my problem is that what im receiving is not an image, is a large cup of binary macarroni like those:

�PNG


IHDR  D���gAMA���asRGB���PLTELiq���F��A����<����U�(����"��5��D��>����F��8��3��!��#��B��C��C��E��H��?��B��#��'��#��%��"�U��$��'���!��G��(��'��3��E��?��I��G��L��J��K��Q��K��J��K��*��@��;��1��9��;��5��/��=��6��;��;��+��-��1��.��)������������������F�� ��$��$�� ��J��I������K��8��L��-����)��-��M��L������-������)��.��8�����������2��3��8��:��C�� ��F��0��"��5��>��5��<��'��,��(��+��;��$��D�������%��*��/��A��E��@��4��)��&��������.��A����?�������K��@��*��!��&��I��.����B����#�������������!��G��/��O��;��9��e��y���ٯ�����u�����b��E��H��D��&��#��E��"����5��%��J��L��H��K��M��9��<��A��1��8��<��0��+����$������߼�ϙ�М�֩�ԣ�Ă�̒��o��Q�޺����ʎ��w�ƅ�����Y����Ɔ��0��5��1��������������������ح��7�զ�����M�޺����������V��8�����~��P�͕����џ�����T�Ƈ����m�����]���۳#�jtRNS��	��������%''�&3���3������
���������+���������`����������֛������`(���Ό�����a���``��+`������,��VY5eIDAT8�U�uXSQ���	��������`ww��±R���1`0�Al������8�^g�����{�=�� ���L�Ե{�NݻΚ��E�p�ع��];���m۹k{��Ii����v��u�������#��8�rO�$^��.�$��:��r�%��hcy��X�u
��4pX�Ma�f�.4��k�����;��h4V��Wx��5g��r����|���(9...٤��9�N�E�[	�hS;�<{�h���_�I��EjHU��'
��ޞ"��a��_�+W	��깷�G�>+HD�*�
�QT\�pD������/���A���ܹ ���@o�<��CQy.��I�t&P����E�����b���j�e� ����X����V��)dε>�T>գ�JQ���Qvt����JNBw�7I��"%K�A��\�Ǭ*e{A� >�-��r�>�W�>(5'đ��
���j�� +y��yq�,�$*C�XS�C$�AŹ����H%?�Q��(��uH�B��>P&������.S��z.�{E�>A�U������1�P�J%k/��B|�
�lt|�D�RZ���F*���-��rK�����#*,ۤ���m[���b�!�(^�[��z�4O��O˶l�#|S�Y�J���8�]B׿$>��$��Y�/��-c64]�Ɋze�|�-�b!�+�n�hA'~�����,�=�Qm�
(�otfS�S�8����rY\��K��5չ	��j��n��2�r9��U�t�oŶ�D�մ٩C"�L��Ɍ��:qB��99�K�gfΰ�2gf�ϛ�������×6x���O�Q�/׸���1­IEND�B`�

I've been trying to play with the response headers and more parameters but I was not be able to achieve it, so please help 如何使用NestJs从外部API返回一个简单的图像?

Also my controller method is the following:

@Get('getExchangeIMG/:exchangeName')
  returnExchangeIMG(@Param('exchangeName') exchName) {
    return this.exchangeCordinatorService.getImageByName(exchName);
  }

Ty in advance

答案1

得分: 4

经过几天的研究,我发现了问题所在。与 NestJs 用于请求的底层库 axios-http 有关,它会将一切都保存在一个 JSON 中,所以如果我想获取二进制图像代码,它会将其保存在 JSON 中作为字符串,并破坏二进制数据。

为了解决这个问题,我们必须将 JSON 中解析的二进制数据转换为缓冲区,然后将其转换为 base64 码,例如:

res.send({
  image: Buffer.from(response.data, 'binary').toString('base64'),
  extension: 'base64',
});
英文:

Well after some days of research I've found the issue, there was a problem with the underlying library NestJs uses for the requests, axios-http , which saves everything in a JSON, so if I want to get a binary code image it will save it on the JSON as string and will break the binary.

To fix this we must parse the parsed binary on the JSON to a Buffen and then transform it to a base64 for instance:

 res.send({
                imagen: Buffer.from(response.data, 'binary').toString(
                  'base64',
                ),
                extension: 'base64',
              }),

huangapple
  • 本文由 发表于 2020年1月7日 01:53:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/59616727.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定