显示作为响应收到的图像 - Vue.js答案

【问题标题】：Display Image received as response - Vue.js显示作为响应收到的图像 - Vue.js
【发布时间】：2021-02-05 09:10:33
【问题描述】：

我已经使用 axios 从数据库中获取图像

          axios.get(`/file/${eventID}/logo1/${name}`,{

                headers:{

                    'Authorization' : `${token}`,
                    'content-type': 'image/png',
                    'accept': 'image/png'
                }
                
            }).then((res) => {

                console.log(res.data)
                this.logo1 = res.data

            }).catch((error) => {

                console.log(error)
            })

我正在获取以下格式的 res.data

我想在我的一个页面中显示它。

  <b-row>
        <b-col>
            <div>
                <b-img :src="logo1" fluid alt=" "></b-img>
            </div>
        </b-col>
    </b-row>

我应该如何实现它？

【问题讨论】：

标签： vue.js vuejs2 axios bootstrap-vue

【解决方案1】：

您可以将data:image/png;base64, 附加到base64 编码的logo1。

this.logo1 = 'data:image/png;base64,'+ btoa(res.data)

【讨论】：

我建议使用 Base64 库 (webtoolkit.info)，因为我在某处看到 btoa() 有一些缺陷。
嗨，好的，所以我必须将其转换为 base64 编码图像，然后将其分配给 this.logo1 @JanMadeyski
你能把logo1设置成base64码后的结果告诉我吗？
你可以使用 btoa() 方法 - developer.mozilla.org/en-US/docs/Web/API/…

【解决方案2】：

我做了一个小改动。将响应类型添加为 blob，然后将其转换为 URL。现在图像显示在前面。

axios.get(`/file/${eventID}/logo1/${name}`,{

            headers:{

                'Authorization' : `${token}`,
                'content-type': 'image/png',
                'accept': 'image/png'
            },
            
            responseType: 'blob'
            
        }).then((res) => {

            const urlCreator = window.URL || window.webkitURL
            this.logo1 = urlCreator.createObjectURL(res.data)

        }).catch((error) => {

            console.log(error)
        })

【讨论】：