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

Posted 2023-03-28

【中文标题】如何在reactjs中将数据二进制转换为图像？

【英文标题】：How to convert data binary into image in 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 />
                                    <Spinner />
                                </div>
                            )
                            
                            : props.generated !== ''
                                ? <img src="data:;base64,"+props.generated />
                                : <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 你能看看我的查询并提出我需要相应实施的更改吗？

【参考方案1】：

你可以这样做：

<img src=`data:image/*;base64,$props.generated`  />

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

参见 php 的 base64_encode() 和 this *** answer。