React Native: Image not displaying with dynamic/local URI

Question

so I'm trying to display an Image with a dynamic uri/path (at initialization it displays a placeholder image, and then later changes) like so:

<Image source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

where this.state.pickedImage is initialized as null, and then changed using react-native-image-picker's launchCamera and launchImageLibrary like below:

cameraHandler = () => {
    ImagePicker.launchCamera({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => {
        if (res.didCancel) {
            console.log("User cancelled!");
        } else if (res.error) {
            console.log("Error", res.error);
        } else {
            this.setState({
                pickedImage:  res.uri,
                imageSize: res.fileSize,
            });
        }
    });
}};

(I should mention that I've implemented launchImageLibrary in exactly the same way, so I didn't really see a reason to put it here.)

and while the placeholder image shows up just fine, whenever I upload a new image, the <Image/> doesn't seem to render at all and I'm only left with a background.

What I've tried:

I've tried doing something like initializing this.state.pickedImage in my state like:

pickedImage: require('./Placeholder.jpeg').uri

and then adding the image tag like:

<Image source={{uri: this.state.pickedImage}} />

but alas that just ends up preventing me from rendering any images at all.

I've thought about dynamically binding the paths to require() like here (and also many places on this site), but as I understand it, you need to know what the potential images you might want to be from beforehand, and if I'm using the camera, I can't really do that. (Also, it's not like I can set up a list and export every image on the user's phone from beforehand, so my hands are tied there.) (Apparently, there's no way to really dynamically bind to require() the way I'm looking for, because the package manager doesn't work that way)

Is there any way I can render these uris? Any help is appreciated!

(I'm using react-native 0.57.4 btw)

score 1 · Accepted Answer · answered Nov 09 '18 at 08:37

Turns out the solution was pretty stupid, but all I had to do was set a width and height to the tag, like:

<Image style={{width:100,height:100}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

I had initially overlooked this solution because I had done something like:

<Image style={{width:'100%',height:'100%'}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

and it didn't work at the time but now it works. I have no clue why, but it just works now. If anyone has any idea why, I would be very grateful to know why.

score 0 · Answer 2 · answered Nov 08 '18 at 11:08

0

Which 'react-native' version you are using? It doesn't work on all platforms? require('./image.jpg') should work, maybe something wrong with your URI. Or try to load with Image.resolveAssetSource(source);

answered Nov 08 '18 at 11:08

slava_slava

636
1
10
23

I'm using react-native 0.57. I don't think there are any bugs of this kind for this version of react, as far as I'm aware. Also, looking it up right now, *as I understand it*, `Image.resolveAssetSource` only seems to convert a path into a uri, which doesn't seem to be much help. (https://facebook.github.io/react-native/docs/image#resolveassetsource) – SSBakh Nov 08 '18 at 11:13

score 0 · Answer 3 · answered Nov 08 '18 at 11:19

0

I think your res.uri is not ok.

On my project where I load images from gallery I have res.node.image.uri , like this:

 <Image style={styles.imageItem}
    source={{ uri: res.node.image.uri }}
 />

answered Nov 08 '18 at 11:19

oma

1,804
12
13

I've tried that, but it didn't really work. If the issue was the paths I was using, then I would have hit an error with the `require()` I used above, since I used the *exact* same path when I was initializing `pickedImage` as `require("[PATH]").uri`. – SSBakh Nov 08 '18 at 11:21
hmm.. if you `console.log()` the `this.state.pickedImage` what is the output ? – oma Nov 08 '18 at 11:22

React Native: Image not displaying with dynamic/local URI

3 Answers3