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.

Albur

Have you try this – Mcglynn

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" /> – Albur

@Albur 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. – Robichaud

@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 – Albur

@Albur Can you please take a look at my query and suggest the changes that I need to implement accordingly? – Robichaud

@bubble-cord sorry for late response, do you still have an issue for your code? – Albur

@Albur yea. Still the same – Robichaud

@bubble-cord you can post a question, and write the code. I will try to solve your question. send the link to me – Albur

@Albur #63887936. Here – Robichaud

Answer 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.

Predispose