I want to use in PixelRatio in react-native but not sure where I insert my image path.
in react native docs , I don't see any mention about the path of the image when using in pixelRatio
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
the source here is the image dimension, but assume i have url, where to write it?
in Image docs of react, I have to write it instead of the source e.g
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
so what the right way to do when I use PixelRatio?
The Image.source prop is a plain object descriptor that takes properties uri, width and height (among other image source types, such as embedded assets).
You should be able to construct the image source yourself:
const image = {
uri: 'https://facebook.github.io/react/img/logo_og.png',
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100)
};
return <Image source={image} />
Related
I'm learning React Native by building an app that takes a picture and shows the image in a gallery.
I'm using react-native-vision to take the photo and react-native-fs to access the temporary file as suggested in this answer and use it as the uri of <Image/>
However, the View that should display a list of </Image> it's showing a blank space
This is my code:
// saves photo on Array and closes the Camera View
const onPressButton = async () => {
console.log(cameraRef.current);
console.log(123);
const photo = await cameraRef.current.takePhoto({
flash: 'off',
qualityPrioritization: 'speed',
});
console.log(photo);
setPhotos([...photos, photo]);
setShowCamera(false);
return;
};
// how I'm trying to render the photos
{photos && photos.length > 0 && (
<View style={{width: '50%', height: '50%'}}>
{photos.map((photo, index) => (
<View key={index}>
{console.log('file://' + DocumentDirectoryPath + photo.path)}
<Image style={{maxWidth: 10, maxHeight: 20}} source={{uri: 'file://' + DocumentDirectoryPath + photo.path}} />
</View>
))}
</View>
)}
This is how it looks:
Is there something wrong with my code?
Thanks for the help.
There are 2 potential errors in your source code.
Photo taken by react-native-vision is chached. (photo.path look something like this: /data/user/0/your.app/cache/mrousavy6472....jpg) So do not use DocumentDirectoryPath, use just source={{uri: 'file://' + photo.path}}
Second potential error is Your photo is not shown because he is hidden from view. Try to set style like this: style={{width: '100%', height: '100%'}}
So in final look like this:
<Image style={{width: '100%', height: '100%'}} source={{uri: 'file://' + photo.path}} />
My local images have suddenly stopped displaying in my app.
I tried the solution proposed here: https://stackoverflow.com/questions/35354998/react-native-ios-app-not-showing-static-assets-images-after-deploying
but it didn't work.
I'm importing my image as follows:
import image from '../../assets/images/home-1.jpg';
...
return (
<SafeAreaView style={[styles.container, {margin: 0}]}>
<Image source={image} style={styles.image} />
...
</SafeAreaView>
);
...
const styles = StyleSheet.create({
image: {
backgroundColor: 'red',
width: 300,
height: 300,
},
...
But my image looks like this:
What can be wrong?
I think your used is wrong.
You can try:
<Image source={require('./my-icon.png')} />
More in docs of React-native. Please follow it.
I just started a react native project and want to display images. Urls of images come from the server side and I want to display them, but images are not displaying.
I am storing an image URL into a variable then pass this variable to require.
//responseJson.url = "https://localhost.com/content/img/react_thumb_install.png";
const imgUrl = responseJson.url;
<Image source={imgUrl} />
How could I display the image directly from the server?
You will need to pass uri option like below since it's you want to load it from a url:
<Image source={{uri: imgUrl}}
style={{width: 400, height: 400}} />
See https://facebook.github.io/react-native/docs/images#network-images for more details
// This is how you can display the image which is coming from Server
<Image
source={{uri:'https://snack.expo.io/web-player/37/static/media/react-native-logo.2e38e3ef.png'}}
style={{ width: 40, height: 40 }}
/>
// -----------------------------------------
// This is how you can display the image which is coming from your local folder
<Image
source={require('../assets/images/app-logo.png')}
style={{ width: 40, height: 40 }}
/>
Go through : https://facebook.github.io/react-native/docs/images
<Image
source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{width: 400, height: 400}} />
The data passed is incorrect, it understand javascript object not the string you are passing the string variable. Check with passing
<Image
source={{uri: imgUrl}}
style={{width: 400, height: 400}} />
In my React Native project folder I have the src files which hold the components, and also some images I want to use across both iOS and Android. If I use this:
<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />
then the image loads perfectly. However, the source in the image tag is going to be created dynamically when the user takes a photo. This code:
<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />
does not work. No errors thrown, but no image displayed. I'm sure I'm on the right track as it will return images taken by the camera and stored on the device using the same code when I replace the source with a prop (<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />) but for the static image it's not happening. Suggestions?
For the static images you need to specify like below source
source={require('static_image_path_relative_current_directory')
Only for remote and local files(not static) we need to specify uri in source like below
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}
And here is the code I'm running. It loads fine if I use a image path.
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
<Image source={{uri: base64Icon}} style={styles.thumbnail}/>
first, looks right, double check that you're string is valid base64? when I tried to decode, I got an error. could be the tool though.
and you need to set with and height of the image. since you didn't show your styles, not sure if you've done so.
this should work...
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';
<Image
style={{width: 100, height: 50,
resizeMode: 'contain',
borderWidth: 1,
borderColor: 'red'}}
source={{uri: base64Icon}}
/>
ref SOF for more info