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'}
Related
I was using react-native-image-rotate to rotate images but its no longer mantained, any idea what could be a good alternative.
ps: I am not using expo and I am using react-native v0.71.0
I tried react-native-photo-manipulator and other packages but the build fails everytime.
Use transform style properties.
<Image
style={{width: 50, height: 50, transform: [{rotate: '45deg'}]}}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
Using react native expo.
Once performing action in one of the pages, if the action is success, it will forward to another page that will only contain a view with an image, the image inside the url can change all the time(by another user regardless to the app).
I had an issue that when image is being changed, the previous image is still in the cache so it is loading the previous image.
the solution is to add "?xxx" at the end of the url and it will refresh to the current image all the time.
The problem now, is that it takes around 2-3 seconds for the image to load, and i cant have that.
Is there a way to load the image from the url in a faster way?
Here is the code that shows the image in the final page:
return (
<SafeAreaView style={[{ flex: 1 }]}>
<View style={[{ height: "8%", backgroundColor: "#EE7629" }]}>
<TouchableOpacity style={styles.backStyle} onPress={navToTakeCart}>
<Text style={styles.backText}>Go Back</Text>
</TouchableOpacity>
</View>
<View style={[{ height: "92%", backgroundColor: "#EE7629" }]}>
<Image
source={{
uri:
"https://click2lock.azurewebsites.net/Images/AdvertiseImg/Image" +
compId +
".jpeg?1",
}}
style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
/>
</View>
</SafeAreaView>
);
Thank you
Same issue for me, I'm looking for a solution of this network related issue with expo, while searching I saw some post advicing to use FastImage, Also saw that there is an implementation for Expo, but had no sucess implementing it on my app.
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}} />
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} />
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