Next js запроксировать url картинки

Рейтинг: 0Ответов: 1Опубликовано: 18.08.2023

Появилась задача запроксировать url в компоненте Image. Изначально делаю запрос на сервер с /api/... получаю данные. Далее прокидываю url в next api метод:

<Image
   src={`/api/get-image?${queryString}`}
   width={300}
   height={120}
   alt=''
/>

Обращаюсь на сервер:

async function getImageById(req: NextApiRequest, res: NextApiResponse) {
    try {
        const token = req.session.user?.token;
        const imageUrl = req.query.imgUrl;

        const response = await axios.get(`${process.env.NEXT_PUBLIC_API_URL}${imageUrl}`, {
            headers: {
                "Authorization": `Bearer ${token}`,
            }
        })
        .then(res => res.data)
        .catch((err) => console.log(err));
        
        console.log('response', response)

        return res.status(200).send(response) ;

    } catch {
        return res.status(500).send({ message: "Something went wrong" });
    }
};

export default withIronSessionApiRoute(getImageById, sessionOptions);

Данные с сервера можно получить только по токену. Но мне приходят данные в виде:

����►JFIF☺☺☺☺���       ♠

▬

¶§►▬↔↔▼▼,$&1'▼▼-=-157:::#+?D?8C49:7☺
→→7%▼%77777777777777777777777777777777777777777777777777��{�♥☺"☻◄☺♥◄☺��☺♣☺☺♦☺☻♥♣♠�B►☻☻☺☻♥♣♣♥
☺☻♥◄♦!↕1A♣‼"Qa♠¶2qၑ�Bb�����§▬#3DRT���4CSs�����→☺♥☺☺☺☺☺☻♥♦♣♠��'◄☻☻☺♦☻☻☻☻♥☺☻♥◄♦↕!1‼QAR¶"§a♣2���
♥☺☻◄♥◄?�☻���`q'H�~"�↔A��►�i8�1(��↔
�/(����ԩ
��(<����p�6♦��� �
y‼�j�:`���f���D��-�     >�k4�S∟0#��‼J�Ow�>^rok��P�>↑0�� ,��"��g$K�      n&♥́↓�x�v#�1`0c�I��+�ᬞ↕7&☺b�ܦ���u�3�H�~x\�"��x|2→*;���☺+�!c�▲�↕j^���♦∟�:K��٩,�q��§G)%�^�¶�Ӝ�S@�2o�Ŵ�(�m���h§�*:��^§��1�*��☺��`:�%e$��q��T8Xg��↑��L→��H..z�&G�↓���‼�pDZ@��◄�d���e�↑�+(#��,�8G◄�►↓cR�¶x����7vll6�=a����R�-��♦◄☺���]�$�p    ��♥1Z▲↔♥��1'�)kP�26�.M��)(Wbr$�2�Dt#↑�.∟=�↑↓�q  ��C�↨RTm�I2�♥��#]�0��9�♠y@^)>�֙P�#X��☺��3p�):�t'���� �R∟0 �z�W♦&H��r♠↓]��5y�2�'�.J��3◄���8��� ��Q�ZZ��w�|�↓s/►
♠2"�Gz~!��∟�ీZ�.��R,�5,*Q]♥#♥>�CP�eH§��;=`���I$x��♥2��K��EF�[Kn���6Q�z�SZ،�O►�F�%�l♦♥�#�C�N������A&R��I�1B�P3�♠�~�vM�;���먭� ☺T��♣��☻��☺�z�S!:�↨�@↨�+��8�fi�ʫ��|�▼H&�Fv▲�g5��Z�7◄�▲�Y��wh��♣LWē�ˀz�RL��8�1�0�_X���%d��"�.u��dm��Ʌ�^◄���UI�s�☻]`Z�ɓ�a���x/\s�▲�Z��'q¶���G�x�JQ�►�t�H!a,♣�0}%0♦%��‼Ml↑�<�J�2G
d↑EnYx\
�·�򙢐I1��a��� ↕�����zC↨T*��.     ↑l��>�]�%���6<�\{.�o1e�¶e�=�6�¶§뙗���#8�6�ho]�#<�W
UrO
;V♣oK֡��󗅧R�                                                                  c�e���'d���JY@)��|↓�
+����ej����cy~�Lo��j�▼►a�4���↑��o�y�"J��E∟�rYB�t;J�§��H;�(p�5EK�u�PrNDŽu����˳
/�ې|r��1����▼�&յ���\��↑>��ݡ�8�g�zī�஺.Ss���Í��a�♥i4@�x��8���y��<���Wb�l//Y^��a���$�M���b�)m@�s▲M�}����K��8Y�{���܋�S-^,c�/ݏ��ӟ(�H*���b��Xd'��0���I
�yDT�►�u���_Hw ����w���]Y���\∟t��k�x�eA�f[v�☻{�؎��q\�♠����5�A�M�˹���c�‼���5▬�∟5%�♠��W1}�>LD��M`5^�bw�����/A(�nGY�F��5��z��g0n�§Q�ۅ�8�߮8�j§���d
�~s���5L��X���?Oڴ�h[sX��∟���}@\��
�K����↓糪�����4���O&◄�a���      S�<��§z|�eO�9�Y���8
^�q���H����:=*mVqw~�/���t�U��o��‼7ZOwXm�↓↓<��5�g�=M^
�|[�↓���M�{�@@�9�'
�X�(�y�<�P�2$��8���X☻��6�▲��Qj♣
�<�0�♣h0���`�,��↑��Fu�r<�y{RW�E☺↔�B�oI`�zC☻m►I-��U(‼�}$�J<��d������o�Z�A�D̾�◄]�uL@♠�▲�~��Md@)N�����32��T�8"*��gTR�G�v��Y���`�gl M:Qc���r�$`�~s��el�ih�Qn����♣�▲�.�-�◄�G�X^%"�����|�Բ|��f�.A=��8��:◄�?)~�D�¶��Heof��M�-�����>�▼99���u6q↕���
6;���l��mGf�M���߲�V�d��¶���X�@\xs�I�Z�d�Z�޹�☺���A�<�N▼�Ez]QU☻��r��|��J����ۥ������@ɽε�♦�8�bS�↨<(�s�(}��c☺��`�§)���C�{A�5�g�@b����'�?�‼�I▲\3��ڽe�F↑↓∟�>{��h�7�    �{?�hٯ�S������↨����u��|�J�>WI\�X�☻��uD�!¶�N�N��sb▲;�>s����M݀+ s s?|��>���p�,bt�nQ���↓F��∟∟ڋ↔KF�,�-��S�h���33x����MF�S~���]↑޺��Y�7q��i��↑'E}�
�A¶��ᖕ�0{R����~�K�S��▼��NlI     �㏣�Z�}�'�����~�Cڋ:i↨��I͎r�7�>�Z�~�H��Z?���?

Но мне нужен URL картинки.

Ответы

▲ 1

Вы получаете непосредственно картинку. Её можно превратить в URL с помощью createObjectURL, если прочитать ответ как blob