Passing Image source to a Component

Question

I have a file main.js that calls a component Home like

 <Home width = {width} }/>

And my home component has an Image like

class Home extends Component{
    render(){
        return(
            <View style = {{width: this.props.width/2,height:this.props.width/2 ,
                borderWidth:0.5,borderColor:'#dddddd'}}>
               <View style = {{flex : 1}}>
               <Image 
               style = {{flex:1,width:null,height:null,resizeMode:'cover'}}
               source = {require(this.props.source)} >
               </Image>
               </View>
               <View style ={{flex:1 , alignItems:'flex-start', 
               justifyContent:'space-evenly', paddingLeft: 10}}>
               <Text style = {{fontSize:14,color:'#b63838'}}> 5 bedroom </Text>
               <Text style = {{fontSize:12 , fontWeight:'bold'}}>North York</Text>
               <Text style = {{fontSize:12 , fontWeight:'bold'}}>$4000</Text>
               </View>
                </View>
        );
    }
}
export default Home;

The image is store locally in an asset folder which can be accessed by require('../assets/Images/Houses/house6.jpeg');

My component has to be called multiple times using different images.
How can I pass the image path to the Home component.

<Home width = {width} source = ??????/>

You have already accessed this.props.source in your home component. The only thing you have to write is <Home width = {width} source ="../assets/Images/Houses/house6.jpeg" /> — Nagama Inamdar
– Nagama Inamdar, Commented Nov 14, 2018 at 5:59
Sorry that actually gives me an error saying require{this.props.source} is an invalid call — Buttersnips
– Buttersnips, Commented Nov 14, 2018 at 6:20
<Image style = {{flex:1,width:null,height:null,resizeMode:'cover'}} source = {this.props.source} ></Image> Remove the require function — Nagama Inamdar
– Nagama Inamdar, Commented Nov 14, 2018 at 8:28

Nagama Inamdar · Accepted Answer · 2018-11-16 06:19:15Z

2

You have already accessed this.props.source in your home component. As below mentioned export your images in a file to be imported in any component.

Update :

const images = {
    houseImage: require(‘../assets/Images/Houses/house6.jpeg’)
};


export default images;

Home component

import Images from ‘@assets/images’;

<Image style = {{flex:1,width:null,height:null,resizeMode:'cover'}}  source={Images.houseImage} />

edited Nov 16, 2018 at 6:19

answered Nov 14, 2018 at 8:27

Nagama Inamdar

2,85522 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Buttersnips Over a year ago

Yeh I tired doing as you said but I still get the invalid props "source" error

Buttersnips Over a year ago

I followed this article to load local assets and it helped out . willowtreeapps.com/ideas/…

Nagama Inamdar Over a year ago

Ok.Updating the answer.

arjayosma · Accepted Answer · 2018-11-14 06:25:23Z

Try this one:

class ParentClass extends Component {
   construct() {
      this.state = {
         images : [require('../path/to/image1.png'), require('../path/to/image2.png')]
      };
   }

   render = () => {
      // Iterate through this one...
      return(<Home width={width} source={this.state.images[i]});
   }
}

You can't pass something dynamic to a require() function. Read on further here: react native use variable for image file

Collectives™ on Stack Overflow

Passing Image source to a Component

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related