我的回复包含一个 png，我如何在反应中显示图像，因为它不是一个 url？

Posted 2023-03-28

【中文标题】我的回复包含一个 png，我如何在反应中显示图像，因为它不是一个 url？

【英文标题】：My response contains an png, how can I display the image in react since its not a url?

【发布时间】：2021-08-09 20:35:20

【问题描述】：

我有一个包含 png 格式图像的响应，但我无法在响应中显示它，因为它不是一个 url pic of response

有谁知道我如何将这个 png 转换为一个 URL，以便我可以将它插入到我的 img 标签的 src 中？

【问题讨论】：

“我有一个包含 png 格式图像的响应”——不，你没有。您有一个包含字符串的响应，该字符串似乎是图像的文件名。

“有谁知道我如何将这个 png 转换为 URL”- 没有。请参阅 API 文档。

【参考方案1】：

这是我在 React 项目中做类似事情时所做的事情。

1) 假设如下：

我们从 API 获得的响应不是 BASE64 编码的 请求中未指定 responseType 一个 png 是响应

响应数据将如下所示：

带有看起来不友好的字符。

2) 响应类型改变

在请求中设置

responseType: "arraybuffer"

响应现在将在响应的数据中包含 arrayBuffer

然后可以通过

将响应转换为base64

let base64ImageString = Buffer.from(response.data, 'binary').toString('base64')

如果你想在 img 标签上显示它，那么 将 data:image/png;base64, 添加到 Base64 字符串

let srcValue = "data:image/png;base64,"+base64ImageString

但在您的情况下，您似乎只是将文件名作为字符串而不是文件本身。

【参考方案2】：

如果您的应用程序中有图像（资产文件夹或其他），您可以这样显示它

<img src=`assets/$coverImage`>

否则图像应该从 API 以 base64 格式发送，然后您可以简单地显示它。

data = "base64 image"
<img src=`data:image/jpeg;base64,$data` />

【参考方案3】：

为什么不把你需要的imege当作Bese64字符串呢？ 如果您能够将 png 图像转换为 Base64 字符串（显然是服务器端），您可以在 img 标签中轻松地将其用作 src 属性值。

【讨论】：

我无法访问后端，有没有办法在前端做到这一点？

如果您的回复完全包含您在问题的附加图片中发布的内容，则“cover_imag”属性表示只是一个字符串值。提供了任何类型的图像源数据。因此，没有办法将其用作 img 标签源值。

【参考方案4】：

在我的情况下也是如此。 "react": "17.0.1", "react-native": "0.64.2", 我的回复包含 png 图像（没有 URL，没有 base64）， 我将我的响应转换为 base64，如下所示，

const makeApiRequest = async()=>
    try 
        const response = await apiCaller('ProfileImage',"thisID": "ABCD","thatID": "1234")
        if(response.status === 200)
            const dataResponse = await response.blob()
            let blob = new Blob([dataResponse],  type: "text/plain" );
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () 
               var base64String = reader.result; 
               setImageFromAPI(base64String.substr(base64String.indexOf(', ') + 1)); //Setting response to hook
            
        else
            console.log(response.status)
        
     catch (error) 
        console.log("components/profile/ProfileTimeline.js:-",error)
    

但是当我在我的图像标签中使用它时，它没有显示图像，我不知道为什么

<Image  source=uri: `data:image/png;base64,$imagefromAPI`  style=width:100, height:100 resizeMode="cover" />