Load image passed as props react native

Question

When I am trying to load image from props i am getting the following error warning: failed prop type: invalid prop source supplied to image Here is my code

src/components/common/Header.js

<View style={viewStyle}>
  <Text style={textStyle}>{props.children}</Text>
  <Image style={{height:25, width:25}} source={props.imageUri} />
</View>

src/index.js

<Header imageUri='../../images/logout.png'>My App</Header>

and the image is at path src/images/logout.png

please help

Answer 1

As the React Native Documentation says, all your images sources need to be loaded before compiling your bundle.

Adding a simple image in React Native should be like this:

<Image source={require('./path_to_your_image.png')} />

Let's say you have this:

const slides = {
  car: './car.png',
  phone: '../phone.png',
}

Then you pass slides as a parameter but still, you won't be able to use it like this (even though logically should work):

<Image source={require(props.car)} />

Use require() inside the sildes{}

const slides = {
  car: require('./car.png'),
  phone: require('../phone.png'),
}

And then use it like this:

<Image source={props.car}/>

Answer 2

you can set source of image from props like this : in component :

<Image source={props.path} > 

and pass source to component like this: in parent :

<
.
.
path={require("../assets/images/icon.svg")}
.
.
>

Answer 3

your source is wrong.

It should use uri properties.

Either you use require:

<Image source={require('.../../images/logout.png')} />

in turn, you can then require this prop too

<Image source={require(props.imageUri)} />

Or you use the Uri as is:

<Image source={{uri: props.imageUri }} />

Refer to the documentation for more details here

Answer 4

Using the below method gives error in react-native:

<Image style={{height:25, width:25}} source={require(props.imageUri)} />

Instead use:

<Image style={{height:25, width:25}} source={props.imageUri}/>

And pass the below code as imageUri prop from the Parent component.

require('./public/images/image.png')

It has worked for me and hope this will help others.

Answer 5

For a local image path the syntax is

<Image style={{height:25, width:25}} source={require(props.imageUri)} />