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.

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.