How to Read image data from API and render in React Component

Question

I am trying to render the image data from the Webservice and able to get the data like below

That image data i am trying read like the below but image is not displaying ,

getImageFromDrive = (path) => {
    let that = this;
    axios.get(Constants.API + Constants.Files, {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            "Authorization": Constants.AUTH_Element + ',' + Constants.AUTH_ORG + ',' + Constants.AUTH_USER
        },
        params: {
            path: path
        }
    }).then(function (response) {
        var myThat =that;
        console.log(response);
        let data = response.data;
        var base64Flag = 'data:image/jpeg;base64,';
        var imageStr =
            that.arrayBufferToBase64(data.img.data.data);
        that.setState({img: base64Flag + imageStr});

    })
        .catch(function (error) {
            console.log(error);
        })
}
arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = [].slice.call(new Uint8Array(buffer));
    bytes.forEach((b) => binary += String.fromCharCode(b));
    return window.btoa(binary);
};

render() {
    const {img} = this.state;

    return (

        <img className="myImg" alt="" width="300"
             height="300"  src={img}/>
     )
    }

Can anyone suggest me how to read that kind of data and display

Mahdi Tohidloo · Accepted Answer · 2019-06-08 09:14:04Z

3

try below code.

export async function getImageData() {
        await axios.get(`your api url`, {responseType: 'arraybuffer'}).then((data) => {
            const b64Data = btoa(
                new Uint8Array(data.data).reduce(
                    (dataArray, byte) => {
                        return dataArray + String.fromCharCode(byte);
                    }, 
                    ''
                )
            );
            const userAvatarData = {
                key: 'userAvatar',
                value: `data:image/png;base64,${b64Data}`
            };
            return userAvatarData.value; // here we return the base64 image data to our component
        });
}

edited Jun 8, 2019 at 9:14

answered Jun 8, 2019 at 9:00

Mahdi Tohidloo

3,4461 gold badge19 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to Read image data from API and render in React Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related