How to render image with content:// in react native-CodePudding

I am using react-native-scoped-storage for getting all files in a folder. I am getting the image in the following URI format:

"uri": "content://com.android.externalstorage.documents/tree/primary:Android/media/com.whatsapp/WhatsApp/media/.Statuses/document/primary:Android/media/com.whatsapp/WhatsApp/media/.Statuses/images.jpeg"

How I can render this image in the component? I would really appreciate it if anyone can provide me with a solution.

I am new to react native. Thank you.

CodePudding user response：

Look like you are loading image from URI. You can check it in docs https://reactnative.dev/docs/images#uri-data-images

// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: 'contain'
  }}
  source={{
    uri: 'content://com.android.externalstorage.documents/tree/primary:Android/media/com.whatsapp/WhatsApp/media/.Statuses/document/primary:Android/media/com.whatsapp/WhatsApp/media/.Statuses/images.jpeg'
  }}
/>