后端返回图片前端怎么处理

 

在项目开发中，前端登录验证很多需要验证码功能，可以是前端自己生成验证码，还有的是后端生成验证码直接返回给前端，那么当后端返回来的是一张图片验证码，前端应该怎么样把这个验证码展示出来呢？

一般我们返回回来的验证码都是一些乱码，如下图所示: 

 

这是因为返回的数据获取的格式不对，我们需要在axios请求的时候进行一些设置

全部代码如下：

 axios.get('http://example.com/image-url', { responseType: 'arraybuffer' })
      .then(response => {
        const blob = new Blob([response.data], { type: response.headers['content-type'] });
        const imageUrl = URL.createObjectURL(blob);
        this.imageData = imageUrl;
      })
      .catch(error => {
        console.error(error);
      });
  },

使用axios发送GET请求获取后端返回的图片数据。通过设置responseType: 'arraybuffer'，确保返回的数据以二进制数组的形式接收。

然后，将返回的二进制数据转换为Blob对象，并使用URL.createObjectURL()方法生成图片的URL。最后，将生成的URL赋值给imageData，从而在模板中展示图片。

请注意，示例中的http://example.com/image-url应替换为实际的后端图片URL。 

---

 

如果这个方法不行的话，可以试试下面的代码：

	axios.get(`http://xxx`, { responseType: 'arraybuffer' }).then((response) => {
		const blob = new Blob([response.data], { type: response.headers['content-type'] });
		const reader = new FileReader();
		reader.onloadend = () => {
			imageUrl = reader.result;
		};
		reader.readAsDataURL(blob);
	});

 我们使用FileReader对象将blob类型的数据转换为data URL。在reader.onloadend事件处理程序中，将转换后的data URL赋值给imageData，然后在模板中展示图片。

这个就直接生成了一个以"data:"开头的图片地址，这是一种称为"data URI"的格式，可以直接将图片数据嵌入到HTML或CSS代码中，而不需要通过外部文件引用。这种方式可以用来在网页中展示小型的图片。

有什么疑问欢迎一起讨论哦(●'◡'●)