Load image passed as props react native - 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

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 3

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 4

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 5

For a local image path the syntax is
<Image style={{height:25, width:25}} source={require(props.imageUri)} />

Answer 6

<Image
source={this.props.imgUri}
style={{
height: 30,
width: 30,
resizeMode: 'contain',
}}
/>
call it
<StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput>

Answer 7

You can place Image directly in the Component, as a prop children.
<ComponentA>
<Image source={require('./src/assets/localisation-icon.svg')} />
</ComponentA>
The Component A will be composed of
function ComponentA(props) {
return (<View> {props.children} </View>);
}
This will render the image.

Answer 8

in your express.js server, set up a static directory containing any image.jpg:
const express = require('express')
const app = express()
app.use(express.static(path.join(__dirname, '../path_to/..', staticImages)))
react native component:
return <Image source={{ uri: `http://192.168.0.1:3345/${'image.jpg'}`}} />