Cannot use variable name inside Node.js require

Question

I want to import an image into my react native app locally.

render() {

    console.log(this.props.image);   //   this logs '../../images/avatartest.jpg' every time

    let test = require (this.props.image!);   //    bang is required because of interface
    return (
        <ImageBackground
            source={test}
        >
        </ImageBackground>
    );
}

Running this code produces this error:

Is there no way to accept a variable name that has a string?

@RahulSharma That bang is required to remove an intellisense error. It is the same error with or without it. — smilebomb
– smilebomb, Commented Nov 29, 2018 at 15:19

Selmi Karim · Accepted Answer · 2018-11-29 16:26:04Z

1

All requires must be statically analyzable. That means you cannot use variables in require.

You can bundle the images in your app manually and the use where variables will work.

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

answered Nov 29, 2018 at 16:26

Selmi Karim

2,26517 silver badges24 bronze badges

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

Comments

Guruparan Giritharan · Accepted Answer · 2018-11-29 16:31:33Z

0

What you are trying to do here is to dynamically import an image which is not supported, the best way to do this is to require the images beforehand and pass the required value as a prop. Assume that the parent component for your component is ImageView

export default const images = {
   img1:require('IMAGE_URL')
}

//import this in the your view and use it as the prop value 
<ImageView image={images.img1}></ImageView>

The above method will make sure that the packager can locate the image.

answered Nov 29, 2018 at 16:31

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Collectives™ on Stack Overflow

Cannot use variable name inside Node.js require

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related