CODEWITHSUNDEEP
imagereact-native
user938363
user938363

Reputation: 10360

How to display image through download-only URL with View

My React Native 0.63.2 app will show images stored in cloud storage with code which is similar to below

<View style={styles.container}>
      <Image
        style={styles.stretch}
        source={{uri:'https://filefolder.download-only.com/image1.jpg'}}
      />
    </View>

The problem is that this https://filefoler.download-only.com/image1.jpg only allows to download file to local disk before opening it. One option I can think of is to download and save the image in a temp file locally and display it with source={{uri:file:///path_to_image_file}}. But this option would require explicit downloading of each image even before user clicks and opens it. Is it possible to make the download-only image behaving like a click-able image url? Ex, add "data:image/jpeg;base64," before download-only url (something like source= {{uri:"data:image/png;base64,"+"https://filefolder.download-only.com/image1.jpg")

Upvotes: 1

Views: 4572

Answers (2)

iNeelPatel
iNeelPatel

Reputation: 2703

Use rn-fetch-blob for this: https://github.com/joltup/rn-fetch-blob

  • Fetch image as a blob
  • Convert blob to base64 to display image, use following code to convert blob into base64
 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
     console.log(base64data);
 }

Upvotes: 1

user938363
user938363

Reputation: 10360

After ran some test code with a URL copied from the cloud storage, it turns out that the image can be displayed by <Image> as usual with the URL. There is no need to prefix the image path as we did for stream data.

<View style={styles.container}>
  <Image
    style={styles.stretch}
    source={{uri:'https://filefolder.download-only.com/image1.jpg?expires=xxxxx&signature=xxxxxxxxxxxx'}}
  />
</View>

Please be noted that in browser the url (contains the authorization signature) only allows download the image to local file system. <Image> tag however will download the image first and display it in render view.

Upvotes: 0

Related Questions