CODEWITHSUNDEEP
vue.jsvuejs2axiosbootstrap-vue
vithu shaji
vithu shaji

Reputation: 379

Display Image received as response - Vue.js

I have used axios to get an image from database

          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)
            })

I am getting the res.data in the following format

enter image description here

I would like to display it in one of my pages.

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

How shall i implement it?

Upvotes: 0

Views: 2406

Answers (2)

vithu shaji
vithu shaji

Reputation: 379

i made a small change. Added the response type as blob and then converted it into a URL. Now the image is displayed in fronted.

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)
        })

Upvotes: 0

wangdev87
wangdev87

Reputation: 8751

You can attach data:image/png;base64, to the base64 encoded logo1.

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

Upvotes: 1

Related Questions