[英]My response contains an png, how can I display the image in react since its not a url?
I have a response containing an image in png format,but I am unable to display it in react since it is not a url pic of response我有一个包含 png 格式图像的响应,但我无法在响应中显示它,因为它不是响应的 url pic
does anyone know how I can convert this png into a URL so I can insert it into my src of img tag?有谁知道如何将这个 png 转换为 URL 以便我可以将它插入到我的 img 标签的 src 中?
If you have the image inside your application ( assets folder or whatever ) you could display it like that如果您的应用程序中有图像(资产文件夹或其他),您可以像这样显示它
<img src={`assets/${coverImage}`}>
Else The image should be sent from the API in the base64 format and then you could simply display it like that.否则图像应该从 API 以 base64 格式发送,然后您可以像这样简单地显示它。
data = "base64 image"
<img src={`data:image/jpeg;base64,${data}`} />
Why not treat imege you need as Bese64 string?为什么不将您需要的 imege 视为 Bese64 字符串?
If you're able to convert you png image to a Base64 string (server side obviously) you can easily use it in img tag as src attribute value.如果您能够将 png 图像转换为 Base64 字符串(显然是服务器端),您可以在 img 标签中轻松地将其用作 src 属性值。
This is something I did when I was doing a similar thing in a React project.这是我在 React 项目中做类似事情时所做的事情。
The response data will look like this:响应数据将如下所示:
With characters that does not look friendly.使用看起来不友好的字符。
The response will now have arrayBuffer in data of the response响应现在将在响应的数据中包含 arrayBuffer
The response can then be converted to base64 by然后可以通过以下方式将响应转换为 base64
let base64ImageString = Buffer.from(response.data, 'binary').toString('base64')
If you want to display it on an img tag, then prepend data:image/png;base64, to the Base64 string如果您想在 img 标签上显示它,则将data:image/png;base64 附加到 Base64 字符串
let srcValue = "data:image/png;base64,"+base64ImageString
But in your case, it seems like you are only getting the file name as a string and not the file itself.
但是在您的情况下,您似乎只是将文件名作为字符串而不是文件本身。
same in my case.在我的情况下也是如此。
"react": "17.0.1", "react-native": "0.64.2",
my response contains png image(no URL, no base64), I converted my response into base64 as below,我的回复包含 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)
}
}
But when I use it in my image tag its shows no image, and i don't know why但是当我在我的图像标签中使用它时,它没有显示图像,我不知道为什么
<Image source={{uri: `data:image/png;base64,${imagefromAPI}`}} style={{width:100, height:100}} resizeMode="cover" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.