如何在reactjs中将数据二进制转换为图像？

Question

我已经在尝试这个，但它仍然不适合我 如何将二进制数据转换为 reactjs 中的图像

这是我的代码

        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;

            }

        });

    },

这里是控制器

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,

        });

    }

这是我的前端

<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,

};

你有什么可以帮助我的解决方案吗？拜托，任何建议都会对我很有帮助。

Answer 1

你可以这样做：<img&nbsp;src={`data:image/*;base64,${props.generated}`}&nbsp;alt="generated&nbsp;motif"&nbsp;/>但是您必须确保来自您的 API 的响应是可以解码的。请参阅 PHPbase64_encode()和这个 Stackoverflow 答案。