Not able to display local image in react native

Question

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.

Answer 1

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.