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.

Have you try [this](https://stackoverflow.com/questions/42395034/how-to-display-binary-data-as-image-in-react) — 高鵬翔, Jul 06 '20 at 02:53
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 `` into `` — jhon, Jul 06 '20 at 03: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, Sep 14 '20 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, Sep 16 '20 at 07:45
@jhon Can you please take a look at my query and suggest the changes that I need to implement accordingly? — program_bumble_bee, Sep 16 '20 at 09:41
@bubble-cord sorry for late response, do you still have an issue for your code? — jhon, Sep 22 '20 at 09:04
@bubble-cord you can post a question, and write the code. I will try to solve your question. send the link to me — jhon, Sep 23 '20 at 01:58
@jhon https://stackoverflow.com/questions/63887436/display-an-image-returned-by-mockserver-on-a-web-page-using-react. Here — program_bumble_bee, Sep 23 '20 at 05:08

score 1 · Accepted Answer · edited Jul 07 '20 at 14:44

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 07 '20 at 14:44

Muntashir Akon

8,740
2
27
38

answered Jul 07 '20 at 11:15

simple man

26
2

How to convert data binary into image in reactjs?

1 Answers1

Linked

Related