Download the image transferred as a property,

Question

When I try to load the image from the props, I get the following warningsourceimage error : unsuccessful type of support: invalid prop specified in here is my code

Src / components / general / Header.js

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

SIC / index.js

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

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

please, help

Answer 1

Your source is wrong.

Use URI properties .

Either you use require:

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

in turn, you can also demand this support

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

Or you use Uri as is:

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

Refer to the documentation for more details here.

Answer 2

   React Native Documentation, .

React Native :

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

, :

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

slides , , , ( ):

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

require() sildes{}

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

:

<Image source={props.car}/>

Answer 3

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

Answer 4

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

Answer 5

error :

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

:

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

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

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

It worked for me and hope it helps others.