require() not working with interpolated string when fetching an image in react native

Question

I am using an Image component as a background in React Native and am currently providing the source prop with an image as follows, which works.

const ImageWrapper = (props) => {
      return (
        <Image source={require('../../../images/testingImages/cells.png')} style={styles.imageView}>
          {props.children}
        </Image>
      );
    };

However, I would like to provide the require with an interpolated string with the name of an image provided by a prop as so:

require(`../../../images/testingImages/${props.imgURL}`)

But whenever I do so (even when I create the string as a seperate variable without using ES6 and pass it into require). I get the error -

"unknown named module '../../../images/testingImages/cells.png'".

Is there away to get the image without using require? As I would love to be able to pass the image url as a prop so that I can reuse the component when I want to change the background.

Any help is much appreciated!

TheJizel · Accepted Answer · 2017-02-28 14:28:58Z

2

Hopefully somebody else can provide a solution to your exact problem because I was having the same issue, but my workaround was to pass the entire value for source as a prop. I had that as a value to a certain key for each map within a list in my scenario, so that was clean enough for me. But that may be just moving the problem up a level in your case.

answered Feb 28, 2017 at 14:28

TheJizel

1,9301 gold badge17 silver badges14 bronze badges

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

2 Comments

LuckyLukas Over a year ago

thanks for your help! By the entire value for source what do you mean the value that require() returns? If so how do I find this, I have been googling but can't work out what require() is actually returning!

TheJizel Over a year ago

@LuckyLukas So I have a class called Icon in my Tabs class. Tabs.render() has <Icon image={this.props.route.icon}/> as part of its markup. The route here is a map where the value for the icon key is my full image value (e.g., require('../images/icons/keyboard.png'). I don't know what it's actually returning either, but it works and it's clean enough for my purposes, so I just left it like that.

HannahCarney · Accepted Answer · 2020-04-06 17:27:41Z

2

First create a file with image required - React native images must be loaded this way.

assets/index.js

export const leftChevron = require('./left-chevron.png'); 
export const rightChevron = require('./right-chevron.png'); 
export const circle = require('./oval-bottom-right.png'); 
export const homeandgarden = require('./homeAndGarden.png');

Now import all your assets

App.js

import * as All  from '../../assets';

You can now use your image as an interpolated value where imageValue is the same as named local file:

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

answered Apr 6, 2020 at 17:27

HannahCarney

3,6292 gold badges30 silver badges34 bronze badges

Comments

Vipin Dubey · Accepted Answer · 2017-02-28 15:12:15Z

0

I am not sure if it solves your issue but if your image is available over network you can use your base URL to create a URL to the image and use that URL directly inside as a source.

var fileName = "trolltunga.jpg";
var imagesBaseUrl = "https://www.w3schools.com/css/";
var image = imagesBaseUrl+fileName;
const imageURL = {url:image}

class App extends React.Component {
render() {
 return (
  <Image source={imageURL} style={styles.imageView}>
 </Image>
  );
 }
}

For demo check here https://rnplay.org/apps/hEYzcA

edited Feb 28, 2017 at 15:12

answered Feb 28, 2017 at 14:59

Vipin Dubey

1,4433 gold badges11 silver badges14 bronze badges

1 Comment

LuckyLukas Over a year ago

Images will be local but I shall bear in mind as will no doubt encounter the same problem in future when images are available over network. thanks!

LuckyLukas · Accepted Answer · 2017-03-03 13:09:59Z

0

Here is how I got round it specifically, not really a perfect answer but works fro my purpose. I think the require is called when the component loads and hence the string doesn't get a chance to interpolate to be passed. So instead I import the relevant image in the parent component of image wrapper:

import jungle from '../../images/jungle.jpg';

Then pass as a prop to Image Wrapper

<ImageWrapper image={jungle} />

Then pass this prop to the image source component:

<Image source={this.props.image} style={styles.imageView}>
          { this.props.children }
</Image>

answered Mar 3, 2017 at 13:09

LuckyLukas

4852 gold badges7 silver badges18 bronze badges

Collectives™ on Stack Overflow

require() not working with interpolated string when fetching an image in react native

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related