Load Image in React native from props

Question

I'm trying to render a list of images from a base component by sending down title and image URL.

Everything works fine if I'm rendering the images like this:

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

The issue is coming when I'm trying to render the image from props:

class ListItem extends Component {
    render() {
      return (
        <View>
          <Text>{this.props.title}<Text>
          <Image source={require(this.props.imageUri)} />
        </View>
      );
    }
};

ListItem.propTypes = {
  title: PropTypes.string.isRequired,
  imageUri: PropTypes.string.isRequired,
};

As a result, I'm getting the next error:

calls to require expect exactly 1 string literal argument, but this was found: require(this.props.imageUri).

I've also tried to render the images using uri

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

package.js

"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",

Did you try `source={this.props.imageUri}`? What is an eample value of `this.props.imageUri`? Are you trying to use a relative path or an absolute one? — Code-Apprentice, Jun 03 '18 at 15:26
And check https://stackoverflow.com/questions/36460827/react-native-failed-proptype-on-image-component to see if it helps. — Code-Apprentice, Jun 03 '18 at 15:29
`source={this.props.imageUri}` - Yes, I did try it. I'm not getting any error but the image is not rendered. `this.props.imageUri = ../assets/images/myImage.png` — rm -rf ., Jun 03 '18 at 15:30
`And check stackoverflow.com/questions/36460827/… to see if it helps` - it doesn't help as I don't want to store my image into the `state`. There are about 100 possible combinations of images which may change in the future. I'm looking to send down the path from a Json/APi — rm -rf ., Jun 03 '18 at 15:34
You can't write a dynamic require statement like that, it says it in the error, it wants a string literal — Dominic, Jun 03 '18 at 15:42
@DominicTobias thanks for the feedback. Any idea about how can I render this images dynamically? — rm -rf ., Jun 03 '18 at 15:49
That should have worked and is how you're supposed to do it, You shouldn't have to require them if it is an external uri.... I would absolutely make sure they are valid strings with console.logs. Also they can't be http must be https on ios — Gavin Thomas, Jun 03 '18 at 16:17

Dominic · Answer 1 · 2020-05-30T10:29:08.513

If you're using remote images with uri they can be dynamic but require for local images needs to resolve the paths at build time so they can't be. Create a hash of known paths:

const imageNames = {
   apple: require('./images/apple.png'),
   orange: require('./images/orange.png'),
};

And refer to them by their name:

class ListItem extends Component {
    render() {
      return (
        <View>
          <Text>{this.props.title}<Text>
          <Image source={imageNames[this.props.imageName]} />
        </View>
      );
    }
};

ListItem.propTypes = {
  title: PropTypes.string.isRequired,
  imageName: PropTypes.oneOf(Object.keys(imageNames)),
};

// e.g.
<ListItem imageName="orange" />

Load Image in React native from props

1 Answers1