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

【问题标题】：How to convert data binary into image in reactjs?如何在reactjs中将数据二进制转换为图像？
【发布时间】：2020-10-26 03:14:44
【问题描述】：

我已经在尝试这个，但它仍然不适合我 how to convert the binary data to image in 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,
};

在我的控制台中，generated 有二进制数据，所以我在我发布的那个链接中找到了解决方案，但它仍然不适合我。我想要的响应，在我的前端显示图像中，但这里是我得到的响应它只是我从 Postman 复制的响应的 sn-p，当我从控制台复制时，它只是没有复制任何内容。 ��JFIF��C $.' ",#(7),01444'9=82<.342��C 2!!22222222222222222222222222222222222222222222222222��"�� }!1AQa"q2��#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�� w!1AQaq"2�B�� #3R�br� 就像这张照片

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

【问题讨论】：

你试试this
是的，我正在尝试使用 responsetype blob，但仍然无法正常工作，图像仍未显示。我把{responseType: 'blob'}放到return.axios()里面，把<img src={"data:;base64,"+props.generated} alt="generated motif"/>改成<img src={URL.createObjectURL(props.generated)} alt="generated motif" />
@jhon 你能解决这个问题吗？我也面临同样的问题，但即使按照此处定义的相同步骤，也无法修复它。
@bubble-cord 我只是将响应传递给 img 文件类型。我的代码没有错误，但它不起作用，因为我的 blob 中的响应已经使用 base64_decode() 解码。当我只使用base64_encode() 更改响应时，使用"data:'base64,"+[props.generated 将起作用
@jhon 你能看看我的查询并提出我需要相应实施的更改吗？

标签： javascript reactjs image react-native axios

【解决方案1】：

你可以这样做：

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

但您必须确保来自 API 的响应是可以解码的。

参见 PHP 的 base64_encode() 和 this Stackoverflow answer。

【讨论】：