1

I am extracting image from my device whose file is coming as file:///storage/emulated/0/WhatsApp/Media/WhatsApp Images/IMG-20230525-WA0009.jpg.

I am trying to display this image as:

<Image
  source={{
    uri: 'file:///storage/emulated/0/WhatsApp/Media/WhatsApp Images/IMG-20230525-WA0009.jpg',
  }}
/>

But Image is not getting displayed on screen.

pratteek shaurya
  • 850
  • 2
  • 12
  • 34

1 Answers1

0

Assuming you have the necessary permissions to access the file, you can try the following code:

import React from 'react';
import { Image } from 'react-native';

const MyComponent = () => {
  const imagePath = 'file:///storage/emulated/0/WhatsApp/Media/WhatsApp Images/IMG-20230525-WA0009.jpg';

  return (
    <Image
      source={{ uri: imagePath }}
      style={{ width: 200, height: 200 }} // Adjust the dimensions according to your needs
    />
  );
};

export default MyComponent;

Make sure you have the necessary packages installed and properly set up in your React Native project. Additionally, ensure that the image file exists at the specified path and that the app has the appropriate permissions to access it.

Lenin
  • 570
  • 16
  • 36
  • you have written more or less the same code which I have written in question. Also I wrote that I am able to extract image from device, this can only be done if I have taken necessary permission. Please give a working example – pratteek shaurya May 27 '23 at 10:19
  • `imagePath ` value is the temporary path and should be deleted by OS without your app's consent. There's a chance that that file has already been deleted. – Fiston Emmanuel May 27 '23 at 22:25