我的回復包含一個 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" />