React Native image insertion and strings

Question

I am working with React Native and trying to get an image to show up based off title variable that is different for a list. I do not think I am handling the strings right with the JavaScript but not sure how to fix this. Any suggestions? It runs fine when I just hardcode the image source path so I know that is correct.

<View style={{ flex: 8 }}>
     this.setState({
         link: './assets/' + this.props.title + '.jpg',
     });
     <Image source={require(this.state.link)} style={[styles.images]} />
</View>

Try using `path.join('./assets/', this.props.title, '.jpg')` — Ryan Walker, Dec 02 '17 at 22:39
Possible duplicate of [react native use variable for image file](https://stackoverflow.com/questions/33907218/react-native-use-variable-for-image-file) — Rich Churcher, Dec 02 '17 at 23:19

score 1 · Accepted Answer · answered Dec 03 '17 at 03:10

You can't even setState inside a view like that, and for require statement that you can't put a string with concatenating with another set string, always require statement should be completely hard-coded like this require("./assets/image.png"); and the soln can be like this:

import {...} from '...';
    const titleImages = {
      title1: require("./assets/title1.png"),
      title2: require("./assets/title2.png") //here title1/title2 should be the value that you receive in props
    };
    class Anyclass extends Component {
      render() {
        const { title } = this.props;
        return (
          <View style={{ flex: 8 }}>
            <Image source={titleImages[title]} style={[styles.images]} />
          </View>
        );
      }
    }

if you have multiple titles, you can just declare the require statement in titleImages object and can render the image.

Lucero Peñarrieta · Answer 2 · 2017-12-02T23:04:25.293

0

Maybe, could you try to use:

this.setState({ link: `./assets/${this.props.title}.jpg` });

edited Dec 02 '17 at 23:04

answered Dec 02 '17 at 22:57

Lucero Peñarrieta

37
4

score 0 · Answer 3 · answered Dec 02 '17 at 23:18

Setting aside the call to setState from inside the render, which should probably be avoided, I think the issue here is that you're trying to use a variable inside a call to require. require calls are resolved at build time by the packager, so they need a static resource (one that doesn't depend on the value of a variable). This is a pretty good coverage of static asset management strategies in React Native: https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/

React Native image insertion and strings

3 Answers3