【问题标题】：My response contains an png, how can I display the image in react since its not a url?我的回复包含一个 png，我如何在反应中显示图像，因为它不是一个 url？
【发布时间】：2021-08-09 20:35:20
【问题描述】：

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

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

【问题讨论】：

“我有一个包含 png 格式图像的响应”——不，你没有。您有一个包含字符串的响应，该字符串似乎是图像的文件名。
“有谁知道我如何将这个 png 转换为 URL”- 没有。请参阅 API 文档。

标签： reactjs image png

【解决方案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" />

【讨论】：