我是靠谱客的博主 长情自行车,最近开发中收集的这篇文章主要介绍后端接口返回一张图片,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

(一)项目背景

图形验证码后端接口返回一张图片,前端需要将返回的图片放到前端页面中

(二)解决方法以及代码

axios.get(API.getImgCode, {
  params: params,
  responseType: 'blob' // 必须说明 axios 请求类型
}).then((res) => {
  this.setState({
  imgCodeUrl: window.URL.createObjectURL(res.data) // 后端返回前端渲染
 })
}).catch(() => {
  this.setState({
  imgCodeUrl: require('@/assets/imageFail.png') // 默认图片
 })
})

(三)注意点汇总

1. axios 请求必须 添加 responseType, 不然图片不显示

2. 拿到接口的二进制

 把这个二进制 window.URL.createObjectURL() 就ok

(四)blob 介绍

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

最后

以上就是长情自行车为你收集整理的后端接口返回一张图片的全部内容,希望文章能够帮你解决后端接口返回一张图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(42)

评论列表共有 0 条评论

立即
投稿
返回
顶部