接口返回的一个图片文件， 前端用vue如何显示？

问题

请求后端接口，返回的是一大串,如何在img显示出来？


image.png
解决方法

1.设置axios responseType: 'blob'
2.直接createObjectURL

export function flowExample(data) {
    return request({
        url: '......',
        method: 'get',
        params:data,
        responseType: 'blob'
    })
}
flowExample(data).then(res=>{
       var img = document.createElement('img')
        const myBlob = new window.Blob([res], {type: 'image/jpeg'})
        const qrUrl = window.URL.createObjectURL(myBlob)
        img.src = qrUrl
        img.onload = function () {
            window.URL.revokeObjectURL(qrUrl)
        }
        const imgDiv = document.querySelector('#flow-img')
        imgDiv.appendChild(img)
    })
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容