How to convert data binary into image in reactjs?

Question

I'm already trying this, but it still not working for me how to convert the binary data to image in reactjs

here my code

        return axios.post(`${API_MOBILE}/${path}`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
        })
        .catch((error) => {
            if (error.response) {
                return Promise.reject({
                    message: error.response.data.error,
                    code: error.response.status
                });
            } else if (error.request) {
              console.log(error.request);
              throw error;
            } else {
              console.log('Error', error.message);
              throw error;
            }
        });
    },

here the controller

try {
        let { detail } = yield select(state => state.user);
        const result = yield call(API.generateMotif, payload, detail.api_token);
        
        yield put({
            type: types.GENERATE_MOTIF_SUCCESS,
            payload: result,
        });

    } catch (err) {
        yield put(handleError(err));

        yield put({
            type: types.GENERATE_MOTIF_FAILURE,
            payload: err,
        });
    }

and here my frontend

<div className="box-body">
                        { props.uploading 
                            ? (
                                <div>
                                    <img src={props.image} alt="upload placeholder"/>
                                    <Spinner />
                                </div>
                            )
                            
                            : props.generated !== ''
                                ? <img src={"data:;base64,"+props.generated} alt="generated motif"/>
                                : <AddPhotoAlternate className="icon-large"/>
                        }
                    </div>

GenerateM.propTypes = {
    image: PropTypes.string.isRequired,
    generated: PropTypes.string,
    list: PropTypes.array,
    uploading: PropTypes.bool.isRequired,
    imageChange: PropTypes.func.isRequired,
};

In my console, generated has data binary, so I found solutions in that link that I post, but it still not working for me. Response that I want, in my frontend show image, but here the response that I got it just snippet of response that I copying from Postman, when I copying from my console it just has copying nothing. ��JFIF��C $.' ",#(7),01444'9=82<.342��C 2!!22222222222222222222222222222222222222222222222222��"�� }!1AQa"q2��#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�� w!1AQaq"2�B�� #3R�br� like in this picture

did you have any solutions that can help me? please, any suggestion will be very helpful for me.

yes, I'm trying that using responsetype blob, and still not working, the image still not shown. I put {responseType: 'blob'} in return.axios(), and change <img src={"data:;base64,"+props.generated} alt="generated motif"/> into <img src={URL.createObjectURL(props.generated)} alt="generated motif" /> — jhon
– jhon, Commented Jul 6, 2020 at 3:09
@jhon were you able to resolve the issue? I am also facing the same problem but unable to fix it even after following the same steps defined here. — program_bumble_bee
– program_bumble_bee, Commented Sep 14, 2020 at 16:42
@bubble-cord I just pass response to img file type. There is no wrong in my code, but it doesn't work because response in my blob already decode using base64_decode() . When I changing response with only using base64_encode(), using "data:'base64,"+[props.generated will work — jhon
– jhon, Commented Sep 16, 2020 at 7:45
@jhon Can you please take a look at my query and suggest the changes that I need to implement accordingly? — program_bumble_bee
– program_bumble_bee, Commented Sep 16, 2020 at 9:41

Muntashir Akon · Accepted Answer · 2020-07-07 14:44:18Z

1

You can do this:

<img src={`data:image/*;base64,${props.generated}`} alt="generated motif" />

But you must ensure response from your API is something that can be decoded.

See PHP's base64_encode() and this Stackoverflow answer.

edited Jul 7, 2020 at 14:44

Muntashir Akon

9,5112 gold badges32 silver badges39 bronze badges

answered Jul 7, 2020 at 11:15

simple man

262 bronze badges

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

Collectives™ on Stack Overflow

How to convert data binary into image in reactjs?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related