四时宝库

1、Network控制台返回数据如下

2、控制台显示数据如下

3、将获取数据显示到img上显示不出来？？？如何解决呢？？？

分析如下：

1、因为后端返回图片是二进制流，所以不能直接渲染显示

2、需要将数据进行转换才可显示出来

如何转换呢？？？

responseType设置为arraybuffer，然后在res返回回调中用btoa和Uint8Array方法将二进制流转变成url地址，注意src后面要注明’data:image/png;base64,’，后面拼接转化的url图片地址

1、设置请求响应数据类型

    只需要将请求的数据设置数据类型即可
		method: 'get',
    responseType: 'arraybuffer',
    data

2、将二进制流数据转换成baser64格式即可解决这个问题

const img = ref('')
const getCode = async () => {
  const res = await getImg()
  console.log(res)
  const src = `data:image/png;base64, ${window.btoa(
    new Uint8Array(res).reduce(
      (data, byte) => data + String.fromCharCode(byte),
      ''
    )
  )}`
  img.value = src

<img style="width: 100px; height: 30px;" :src="img" alt="" />

此时图片就渲染出来了，你学会了吗

学会了，拿起你的发财的小手，点个小星星哦