Display Image received as response - Vue.js

Question

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

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?

topdev87 · Accepted Answer · 2020-10-22 10:57:18Z

1

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

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

answered Oct 22, 2020 at 10:57

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jan Madeyski Over a year ago

I would suggest Base64 library (webtoolkit.info), because I've seen somewhere that btoa() has some flaws.

vithu shaji Over a year ago

Hi, ok so i have to convert it to a base64 encoded image and then assign it to this.logo1 @JanMadeyski

topdev87 Over a year ago

can you let me know the result after you set the logo1 to the base64 code?

topdev87 Over a year ago

and you can use btoa() method - developer.mozilla.org/en-US/docs/Web/API/…

vithu shaji · Accepted Answer · 2020-10-22 13:40:47Z

0

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

answered Oct 22, 2020 at 13:40

vithu shaji

3795 silver badges15 bronze badges

Collectives™ on Stack Overflow

Display Image received as response - Vue.js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related