vue img src加载图片二进制问题记录
此 地址请求 http://xx.xx.xx.xx:xxxx/xx/.../xx/downLoadDoc?docId=xxxxx&access_token=xxxxx 返回的png二进制流。如下:�PNGIHDR M)�l��IDATx���d������d�1����������Ld.3I$�L�$Ɍ$�dL2��%�L�%I"I��L�Ld�I"I��������...
此 地址请求 http://xx.xx.xx.xx:xxxx/xx/.../xx/downLoadDoc?docId=xxxxx&access_token=xxxxx 返回的png二进制流。如下:
�PNG
IHDR M
)�l��IDATx���d������d�1����������Ld.3I$�L�$Ɍ$�dL2��%�L�%I"I��L�Ld�I"I��������z�:��>�sv�;����������z�^���ȕ� G��|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<_5z��ݞ={n߾͡@$�|>|�����Љ������ݽ���Y@y�n�������}����ƍu^���^�|������6>>�u����Ÿ'���d�qG��I������K�':thff�sPk����ӧ���z�*� �����PB"��˗/m�����
ٹs�=���˜&��B��?<��?��������Ç�_-�V�Ժ�۷�}w;hjj�ϭ��_ZZ����|�q����iy���:V###�ǿ�nɶ�������O�����l۶m����|��}�ܩ�)N@�!�����?r�H䟮]�fy��w��������s�N/����dpp�Ǐ;v�x�b������5�D�/�����������i�d����������J��O�>���uvv���������D>�Çz�>ttt��P���MNNNOOG����ö>���={������������p[[��ʊ���;w�~�����G�������W�@m"����떖��?��t��
�[�ny��i���z��˗�?q߾}۶m{��}��[����ӧO��������>p�jy�CCCW�\ ?��͛���#>�looO�Y����K�>|������ǫ��������m۶�?�5�<_�������g?~\P�M�Aصkח/_�s��Ẻ���)ۓ�����| ���ϟ---ׯ_/����V@�oW�ϟ?�ܹ�1A�o߾��������'N��E;w�\ggg�s?~����Ғ���_�~�ƍ�O{����aI��[�꿻v��{�n����u�V__߆_��\U�<_�/_�l���IxΡC�t�&''��>~�x��ɺ�:���{�J�HCC������ח��3��ӧO[B��/�h�������b�:u���-n�?���u�^�~���}��ĉ��
在项目中我使用img src直接对图片的二进制流加载,遇到频率很高的问题是前端发起的请求被服务器多次302重定向了,然后我访问的资源存在问题。然后果断改为通过http get请求下来png 二进制流来处理。思路是通过responseType 制定返回数据格式为blob
请求的图片地址 url = http://xxxxxx:xxxx/xxx/xxx/merchDoc/downLoadDoc
axios({
method: "get",
url,
params: xxx,
responseType:"blob"
}).then(response => {
this.picUrl = window.URL.createObjectURL(response);
});
解析blob 并展示在img src 中如下:
this.picUrl = window.URL.createObjectURL(response);
更多推荐
所有评论(0)