Require non-static image in React Native

Question

I have a special folder with images in my React Native application. Path to these pictures is stored in the special object that is passed as prop to the Card component. So, I can't use require, because it uses only static path string. How can I use load these images from my props? There is my try:

import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet
} from 'react-native';
import EmptyImage from '../data/images/empty-image.jpg';

class Card extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    const { myObject } = this.props;

    return (
    <View>
        <Image 
           source={
               myObject.imagesNames[0] ?
                  require(`../data/images/${myObject.imagesNames[0]}`)
               :
                  EmptyImage
            }  
         /> 
    </View>
    );
  }
}

export default Card;

Guruparan Giritharan · Accepted Answer · 2020-08-08 08:06:34Z

1

As your images are local better create a json object by requiring the images like below

images={
  image1:require('path'),
  image2:require('path2'),
};

And you can set the url like below

<Image source={
               myObject.imagesNames[0] ?images[imagesNames[0]]:EmptyImage
            }  
         />

answered Aug 8, 2020 at 8:06

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Require non-static image in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related