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

Posted 2023-02-22

【中文标题】显示作为响应收到的图像 - Vue.js

【英文标题】：Display Image received as response - 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 ></b-img>
            </div>
        </b-col>
    </b-row>

我应该如何实现它？

【参考方案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)
        )