后端接口返回图片打印出来是一堆乱码，如何显示

Question

后端接口返回图片打印出来是一堆乱码，如何显示

GIF89a������,��@�H����*Ȱ�Ç#J�H��ŋ3j�ȱ�Ǐ C�I��ɓ(S�ɲ�˗0cʜI��͛8s��ɳ�ϟ@�
J��ѣH�]ʴ�ӧP�J�J��իX�j�ʵ�ׯ�K��ٳhӪ]˶�[�"ߊ�(�.�v�����.ؗ}�7����"N̸1�.�V�ұ^�o'�̒�T�-���h�(OCU�Q��ʛ?�F�zvC׬�N�zqc�l��V+�8픻�1����EO;}���̏�tn�z��gI��^$��ރ����y��ׂ7+^�����o�����ɷd�w]L�����7�����:���Y�_X�Fa��uaGU�P�'Չ#>�aT,�"
......
��d���㱾��-��ι����M�n����zE��G��f]��-�켼���.��ִN�z}�n�V��܌������N�T��#N�m���>�������׬=��~���^�ӭ�ځ�׍�������A��{:�
��&�(��*��,��.��0�24?�4_�6�8��:��<��>��@�B?�D_�F�H��J��L��N��P�R��;{
"code" : 200
}

将它用createObjectURL 转换后还是无法显示

        const myBlob = new window.Blob([data], {type: 'image/gif'})
        const qrUrl = window.URL.createObjectURL(myBlob)
        var img = document.createElement('img')
        img.src = qrUrl
        img.onload = function () {
          window.URL.revokeObjectURL(qrUrl)
        }
        const imgDiv = document.querySelector('.qr-div')
        imgDiv.appendChild(img)

根据网上百度的方法都不行
转base64
'data:image/gif;base64,' + Base64.encode(res.data.toString()）

1. 请问在后端不该返回的情况下前端该如何处理？
2. 刚才的一串乱码应该是图片格式 打印之后显示，但是后面的code: 200 是什么，是不是多余？

已解决：

首先需要设置axios responseType: 'blob'
然后直接createObjectURL即可
```
    const qrUrl = window.URL.createObjectURL(res.data)
    var img = document.createElement('img')
    img.src = qrUrl
    img.onload = function () {
      window.URL.revokeObjectURL(qrUrl)
    }
    const imgDiv = document.querySelector('.qr-div')
    imgDiv.appendChild(img)
```

Answer 1

你是不是包含200了？ 200应该是一个状态码，把后面这段json去掉，再转。或者最后让后台返回把图片base64编码
{"img":data,"code":200}

Answer 2

返回乱码不应该直接问后台吗?
让后台返回一个格式正确的数据呀, 不揽锅