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

Question

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

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

Answer 1

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

<img src={`assets/${coverImage}`}>

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

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

Answer 2

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

Answer 3

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

1) 假设如下：

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

响应数据将如下所示：

使用看起来不友好的字符。

2) 改变 responseType

• 在请求中设置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

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

Answer 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" />