CODEWITHSUNDEEP
javascriptreact-nativejsxreact-native-image-picker
SSBakh
SSBakh

Reputation: 1532

React Native: Image not displaying with dynamic/local URI

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)

Upvotes: 3

Views: 1948

Answers (3)

SSBakh
SSBakh

Reputation: 1532

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.

Upvotes: 2

oma
oma

Reputation: 1894

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 }}
 />

Upvotes: 0

slava_slava
slava_slava

Reputation: 666

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);

Upvotes: 0

Related Questions