图片后台返回乱码？这样一改，前端展示即刻正常！

2023-12-15 17:09:20

对于从事前端开发的工程师来说，处理图片是再常见不过的事情了。然而，当你兴致勃勃地想要展示后端返回的图片时，却发现呈现出的只是一堆乱码，这着实让人扫兴。本文将深入剖析图片后台返回乱码这一问题，并提供一种简单易行的解决方案，助你轻松解决前端图片展示难题。

乱码之源：探寻根源

图片后台返回乱码，究其根源，在于后端返回的图片数据并非直接可用的图像文件，而是经过编码后的二进制数据。当前端浏览器接收这些数据时，需要进行解码才能正确显示图片。

解码之法：巧用responseType

要解决图片乱码问题，关键在于选择正确的解码方式。XMLHttpRequest（XHR）对象提供了responseType属性，允许我们指定期望的响应数据类型。通过将responseType设置为"arraybuffer"，我们可以让浏览器将响应数据解码为二进制数据，从而避免乱码问题。

步骤详解：一劳永逸

获取响应数据： 使用XHR对象发送请求并获取后端返回的响应数据。
设置响应类型： 在发送请求之前，将XHR对象的responseType属性设置为"arraybuffer"。
解码二进制数据： 使用FileReader对象将响应数据解码为二进制数据。
创建图像对象： 使用Image对象创建新的图像，并将二进制数据作为其src属性。
显示图像： 将创建的图像对象添加到DOM中，即可正常显示图片。

代码示例：清晰明了

const xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";

xhr.onload = function() {
  const arrayBuffer = xhr.response;
  const fileReader = new FileReader();

  fileReader.onload = function() {
    const binaryData = fileReader.result;
    const image = new Image();
    image.src = binaryData;

    document.body.appendChild(image);
  };

  fileReader.readAsArrayBuffer(arrayBuffer);
};

xhr.open("GET", "image.png");
xhr.send();