Load image passed as props react native

前端 未结 7 1346
清歌不尽
清歌不尽 2021-01-04 20:02

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

相关标签:
7条回答
  • 2021-01-04 20:32

    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.

    0 讨论(0)
  • 2021-01-04 20:35

    As the React Native Documentation says, all your images sources needs 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 the use it like this:

    <Image source={props.car}/>
    
    0 讨论(0)
  • 2021-01-04 20:36

    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

    0 讨论(0)
  • 2021-01-04 20:40

    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")}
    .
    .
    >
    
    0 讨论(0)
  • 2021-01-04 20:42

    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.

    0 讨论(0)
  • 2021-01-04 20:46

    For a local image path the syntax is

    <Image style={{height:25, width:25}} source={require(props.imageUri)} />
    
    0 讨论(0)
提交回复
热议问题