我的响应不是 url，如何使用 base64 显示不是 url 且响应不包含 bodyBytes 的图像？

Posted 2023-02-16

【中文标题】我的响应不是 url，如何使用 base64 显示不是 url 且响应不包含 bodyBytes 的图像？

【英文标题】：My response is not an url, How can I display an image which is not url using base64 and response does not contain bodyBytes?

【发布时间】：2022-01-11 11:00:02

【问题描述】：

我的 api 是 get() 并且响应包含 data 像这样

您可以看到的上图是我想使用 reactjs 在网络上显示的图像。而且我不知道该怎么做。 get api 返回 data, config, headers, request, status,statusText 我希望上面的数据有一些奇怪的格式，要显示我的图像。我不知道该怎么做。需要帮助

---

更新：

action

export const getFileImage = (payload) => async dispatch => 
    try 
        console.log("Payload--->",payload);
        let response = await axios.get('/api/movies/' + payload.movieId + '/document/' + payload.genre.toLowerCase().toString());
        console.log("Response----->",response);

     catch (error) 
        console.log("error");
    

响应的输出：

【问题讨论】：

您是否向后端开发者或 api 提供者询问过这个问题？

是的。通过应用程序访问时它可以工作。但是当从网络调用时它不起作用

您的响应是二进制的，您必须在显示之前将其转换为 base64。你可以试试this 回答。但最好在 base64 本身中获得响应。移动应用程序和网络应用程序不一样，网络应用程序运行在浏览器上，而不是在主机操作系统上，因此您无法像移动应用程序那样在文件存储上创建文件。

@itiDi 事实上，这个 API 直接返回照片的代码，我的意思是像二进制的东西，基本上 android 能够显示......你不能在 web 上使用那种格式，我认为它会最好向后端开发人员询问返回 base64 代码的新路由或转换输出的选项

@itiDi 是的，完全正确！因为您可以轻松地将 base64 用于 UI 端

【参考方案1】：

好的，你问了一个例子，我写了这个答案......

您可以使用 base64 格式在 React 组件中显示图像：

render()
    this.state.image ? <img src=`data:image/png;base64,$this.state.image`/>: ''

我认为最好让后端开发人员或 API 提供商将输出转换为 web 和您在 React JS 中的要求。

【讨论】：

是的，当然。我会试试这个并告诉后端开发者自己发送转换后的图像。

我试过这个。它显示图像。但是当我说在新标签中打开 target="_blank" 它不会在新标签中打开。它给了我空白标签