如何显示从 fetch() 方法返回的图像 - react-native

Question

I have the following code to retrieve an image from an API

await fetch('https://example.com/api/user/fileaccess', {
    method: 'POST',
    headers: {
      Accept: '*',
      'Content-Type': 'application/json',
      'token':'xxxxxxxxxxxxxxxxxxxxxxxx'
    },
    body:  JSON.stringify({"applicantid": xxxx, "user_secret": "xxxxxxxxxxx","fileid":xxxxx}),
  }).then((response) => {
    console.log(response);
  }); 

The request was completed and i got log in my console.

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "xxxxx-xxxx-xxx-xxxx-xxxxx", "offset": 0, "size": 953328}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "xxxxx-xxxx-xxxx-xxxx-xxxxx", "offset": 0, "size": 953328}}, "headers": {"map": {"cache-control": "max-age=2592000", "connection": "Keep-Alive", "content-type": "image/jpeg", "date": "Tue, 04 Feb 2020 10:34:14 GMT", "expires": "Thu, 05 Mar 2020 10:34:14 GMT", "keep-alive": "timeout=5, max=100", "pragma": "public", "server": "Apache", "transfer-encoding": "chunked"}}, "ok": true, "status": 200, "statusText": undefined, "type": "default", "url": " https://example.com/api/user/fileaccess "}

My question is, How to display this data as an image in my app? Is it possible to convert a base64 from this data?

Answer 1

You need to extract it into json or text or some other data before you can do anything with the response.

As per Mozilla docs , A basic fetch request is really simple to set up. Have a look at the following code:

fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(myJson);
  });

So, modify your code as below :

fetch('https://example.com/api/user/fileaccess', {
    method: 'POST',
    headers: {
      Accept: '*',
      'Content-Type': 'application/json',
      'token':'xxxxxxxxxxxxxxxxxxxxxxxx'
    },
    body:  JSON.stringify({"applicantid": xxxx, "user_secret": "xxxxxxxxxxx","fileid":xxxxx}),
  })
.then(response => response.json())
.then((result) => {
     console.log("Your intended result is: " , result)
}); 

The response.json() is added just assuming the server is returning a JSON data. If not, you can try the below methods too based on your server implementation.

arrayBuffer() blob() json() text() formData()

Answer 2

If that's the image URL you can go ahead as follows Store image in your state

this.setState({image:res.url})

and then <Image source={{uri:this.state.image}}/>