接口返回的是一个图片文件而不是url 前端如何显示？

Question

请求后端接口 返回的时一张图片 如何在img中显示?

preview里查看就是显示一张图片

console.log(img):

.]

用blob createObjectURL转换成地址后前端img还是访问不到的效果
结果

代码

 this._http.doGet(this, 'createQRCode', {id: this.lessonId}, (res) => {
        var img = document.createElement('img')
        const myBlob = new window.Blob([res.data], {type: 'image/jpeg'})
        console.log(myBlob)
        const qrUrl = window.URL.createObjectURL(myBlob)
        img.src = qrUrl
        img.onload = function () {
          window.URL.revokeObjectURL(qrUrl)
        }
        const imgDiv = document.querySelector('.qr-div')
        imgDiv.appendChild(img)
      })

首先需要设置axios responseType: 'blob'
然后直接createObjectURL即可

    const qrUrl = window.URL.createObjectURL(res.data)
    var img = document.createElement('img')
    img.src = qrUrl
    img.onload = function () {
      window.URL.revokeObjectURL(qrUrl)
    }
    const imgDiv = document.querySelector('.qr-div')
    imgDiv.appendChild(img)

Answer 1

如果是资源链接，直接用 img 标签
如果是 blob 格式的数据，可以用 URL.createObjectURL() 创建一个临时的 url ，然后再用 img 标签，使用过后不要忘记 URL.revokeObjectURL()

如果不想用 img 标签，还可以用 canvas 的 drawImage() 或者 getImageData() 来渲染图片，也可以达到预览的效果

获取还可以直接接口的 uri 写到 img 标签中，会自动发一个 get 类型的请求出去的，如果返回的资源格式是图片，也可以显示

Answer 2

<img src="接口地址"/>

Answer 3

1：

axios.get(url, { params, `responseType: 'arraybuffer'`}).then(({ data }) => {
    let u8a = new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), '');
    let src = `data:image/png;base64, ${ btoa(u8a) }`;
    console.log(src);
});

2:
如果你的接口文档中写明响应类型为: IMAGE，那么你直接可以当做图片路径直接给img的src

<img src="接口地址" />

Answer 4

我也遇到了同样的问题，是设置了responseType: 'blob'，直接const myBlob = new window.Blob([res.data], {type: 'image/jpeg'})，就能拿到图片url吗