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

Question

我已经使用 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.jsvuejs2axiosbootstrap-vue

Answer 1

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

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