React Native: Image not displaying with dynamic/local URI
up vote
0
down vote
favorite
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 uri
s? Any help is appreciated!
(I'm using react-native 0.57.4 btw)
javascript react-native jsx react-native-image-picker
add a comment |
up vote
0
down vote
favorite
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 uri
s? Any help is appreciated!
(I'm using react-native 0.57.4 btw)
javascript react-native jsx react-native-image-picker
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 uri
s? Any help is appreciated!
(I'm using react-native 0.57.4 btw)
javascript react-native jsx react-native-image-picker
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 uri
s? Any help is appreciated!
(I'm using react-native 0.57.4 btw)
javascript react-native jsx react-native-image-picker
javascript react-native jsx react-native-image-picker
edited Nov 8 at 11:13
asked Nov 8 at 10:50
EighteenthVariable
353312
353312
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
up vote
0
down vote
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);
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. (facebook.github.io/react-native/docs/image#resolveassetsource)
– EighteenthVariable
Nov 8 at 11:13
add a comment |
up vote
0
down vote
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 }}
/>
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 therequire()
I used above, since I used the exact same path when I was initializingpickedImage
asrequire("[PATH]").uri
.
– EighteenthVariable
Nov 8 at 11:21
hmm.. if youconsole.log()
thethis.state.pickedImage
what is the output ?
– oma
Nov 8 at 11:22
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
add a comment |
up vote
0
down vote
accepted
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.
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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);
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. (facebook.github.io/react-native/docs/image#resolveassetsource)
– EighteenthVariable
Nov 8 at 11:13
add a comment |
up vote
0
down vote
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);
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. (facebook.github.io/react-native/docs/image#resolveassetsource)
– EighteenthVariable
Nov 8 at 11:13
add a comment |
up vote
0
down vote
up vote
0
down vote
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);
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 8 at 11:08
Slava
1221216
1221216
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. (facebook.github.io/react-native/docs/image#resolveassetsource)
– EighteenthVariable
Nov 8 at 11:13
add a comment |
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. (facebook.github.io/react-native/docs/image#resolveassetsource)
– EighteenthVariable
Nov 8 at 11:13
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. (facebook.github.io/react-native/docs/image#resolveassetsource)– EighteenthVariable
Nov 8 at 11:13
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. (facebook.github.io/react-native/docs/image#resolveassetsource)– EighteenthVariable
Nov 8 at 11:13
add a comment |
up vote
0
down vote
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 }}
/>
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 therequire()
I used above, since I used the exact same path when I was initializingpickedImage
asrequire("[PATH]").uri
.
– EighteenthVariable
Nov 8 at 11:21
hmm.. if youconsole.log()
thethis.state.pickedImage
what is the output ?
– oma
Nov 8 at 11:22
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
add a comment |
up vote
0
down vote
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 }}
/>
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 therequire()
I used above, since I used the exact same path when I was initializingpickedImage
asrequire("[PATH]").uri
.
– EighteenthVariable
Nov 8 at 11:21
hmm.. if youconsole.log()
thethis.state.pickedImage
what is the output ?
– oma
Nov 8 at 11:22
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
add a comment |
up vote
0
down vote
up vote
0
down vote
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 }}
/>
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 8 at 11:19
oma
73637
73637
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 therequire()
I used above, since I used the exact same path when I was initializingpickedImage
asrequire("[PATH]").uri
.
– EighteenthVariable
Nov 8 at 11:21
hmm.. if youconsole.log()
thethis.state.pickedImage
what is the output ?
– oma
Nov 8 at 11:22
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
add a comment |
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 therequire()
I used above, since I used the exact same path when I was initializingpickedImage
asrequire("[PATH]").uri
.
– EighteenthVariable
Nov 8 at 11:21
hmm.. if youconsole.log()
thethis.state.pickedImage
what is the output ?
– oma
Nov 8 at 11:22
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
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
.– EighteenthVariable
Nov 8 at 11:21
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
.– EighteenthVariable
Nov 8 at 11:21
hmm.. if you
console.log()
the this.state.pickedImage
what is the output ?– oma
Nov 8 at 11:22
hmm.. if you
console.log()
the this.state.pickedImage
what is the output ?– oma
Nov 8 at 11:22
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
Pretty sure it's the correct uri. Something like file:///storage/....
– EighteenthVariable
Nov 8 at 11:30
add a comment |
up vote
0
down vote
accepted
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.
add a comment |
up vote
0
down vote
accepted
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.
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
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.
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.
answered Nov 9 at 8:37
EighteenthVariable
353312
353312
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53206201%2freact-native-image-not-displaying-with-dynamic-local-uri%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown