0

In my RN 0.62.2 app, a function is used to display local images picked from gallery:

const displayImg = (img_source, width, ht, local=false) => {
        if (local) {
            return (<Image source={require(img_source)} style={{width:width, height:ht, resizeMode:'cover'}}/>); //<<<== require causes error with dynamic image source
        } else {  //online 
            return (<FastImage source={{uri:img_source}} resizeMode={FastImage.resizeMode.cover} style={{width:width, height:ht}}/>);
        };
        
    };

But because of the image source is not available when bundling, the RN throws error for the require. The purpose of the function above is to dynamically arrange the image display format by the number of images picked. For example, for 1 image, then the image displayed will take full width. If there are 2 images, then one image will take half width side by side with another image. Since the app does not know which image to display until users pick the miage, the require(image_source) won't know the exact path when bundling and this is violation in React Native bundling. Is there way I can get around of this?

user938363
  • 9,990
  • 38
  • 137
  • 303
  • 1
    Don't use require for user input images. Just use {uri: img_source} because react-native-image-picker will return uri of picked image – glinda93 Jul 16 '20 at 06:58
  • `bravemaster`, thank you for the info. I thought `require` has to be used for local image. Yes, image picker does return a path for the local image picked. – user938363 Jul 16 '20 at 17:03

1 Answers1

1

You don't have to require user input images.

You should use them as external images because react-native-image-picker will return url of picked image.

So instead of

 <Image source={require(img_source)} />

you should:

<Image source={{uri: img_source}} />
glinda93
  • 7,659
  • 5
  • 40
  • 78
  • `'bravemaster`, for a `'path : ', 'file:///data/user/0/com.xyz_app/cache/react-native-image-crop-picker/20160906_112918_HDR.jpg'`, it shows an empty box without image and error. Removed the resizeMode and only leave with style and it is the same. What else shall I correct? – user938363 Jul 16 '20 at 20:19