(一)项目背景

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

(二)解决方法以及代码

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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐