may I know how to display the image preview in React Native app? In iOS I was able to display if it is a http url but in the Android platform I cannot view the image as shown in the screenshot below:
The Running React Native App in Android:
The Image Preview in iOS platform:
In the code the attachment field is equal to this.state.attachment so can see the http url but when I connect it with the Image the image preview is blank. However if I hard code the exact http url address in iOS it can show the image.
//in iOS this one can show the image but Android cannot
let Image_Http_URL = { uri : 'http://localhost:3000/api/containers/container/download/FMS-SiteIcon_v2.jpg'};
//this one is both cannot but in url can show the http url address
let Image_Http_URL = { uri : 'this.state.attachment' };
<Image
style={{width: 200, height: 200}}
source={Image_Http_URL}
/>
<FloatLabelTextInput
onChangeText={(attachment) => {
this.setState({attachment})
}}
value={this.state.attachment}
editable={false}
placeholder="Attachment"
style={styles.input}/>
Please help and thanks.
this.state.attachment should not be enclosed in a string, try { uri : this.state.attachment }; or { uri : {this.state.attachment} };
Related
I'm new to React Native, coding an app for web and android. On web, my images display fine. On Android, some of them don't show. jpgs etc display fine but the images I need are .avif and they do not. Just a blank space shows in place of the image.
const imageSrc = "https://grocer-img.sgp1.cdn.digitaloceanspaces.com/products/4781330397012883.avif"
<Image source={{
uri: imageSrc,
}}
style={styles.productImage}
resizeMethod="resize"
></Image>
productImage: {
width: "90%",
aspectRatio: 1,
}
Does anyone know how I can get my images to work on both web and android?
I've tried using a locally stored .avif to test and that doesn't work either.
If you are testing with Android OS less than version 12, the AVIF image format is not supported - https://developer.android.com/about/versions/12/features#avif
I am currently working on a React Native App that involves images. I use the following code to display them:
//...
<View key={uriFromArray}>
<Image
style={styles.itemimage}
source={
{
uri: uriFromArray,
headers: {
Authorization: `Bearer ${graphToken}`,
},
}
}
/>
</View>
//...
On iOS, this works totally fine, on Android though, the images are not being rendered, neither on a virtual nor a physical device. Weirdly enough, images are being rendered if I copy the acutal token string to Authorization instead of using String interpolation to hand over the token.
Does anybody have an idea of what could be wrong? Thanks!
Try concatenating string before the component renders like:
const header = `Bearer ${graphToken}`;
Then pass it to Authorization key in the Image uri header prop
I'm trying to take screenshot of current page and share via facebook, whats app, instagram, twitter etc., using phonegap. But was unable to do that properly.
I tried out this code but it doesn't work. Can anyone help me to solve this?
function report() {
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function(canvas) {
let pngUrl = canvas.toDataURL();
let img = document.querySelector(".screen");
img.src = pngUrl; // pngUrl contains screenshot graphics data in url form
window.plugins.socialsharing.share(img.src);
// here you can allow user to set bug-region
// and send it with 'pngUrl' to server
},
});
}
I am using image picker for picking image from my phone .image picker provide the response
{height: 33, origURL: "assets-library://asset/asset.JPG?id=9F983DBA-EC35-42B8-8773-B597CF782EDD&ext=JPG", longitude: -17.54892833333333, fileName: "IMG_0003.JPG", uri: "file:///Users/mac/Library/Developer/CoreSimulator/…temfiles/ADC7B1EA-93A0-4A25-B7CA-342BE3EF58BE.jpg", …}
I am using RNFetchBlob for uploading image to firebase. actually i want to upload image using either data or uri not using origURL because i need to reduce the image size before uploading.Currently uploading is not possible using uri
let rnfbURI = RNFetchBlob.wrap(image.uri)
Blob
.build(rnfbURI, { type : 'image/png;'})
.then((blob) => {
// upload image using Firebase SDK
firebase.storage()
.ref()
.child('images/')
.put(blob, { contentType : 'image/jpg' })
.then((snapshot) => {
}).catch((error) => {
console.log(error);
Alert.alert(error);
})
});
are you using https://github.com/react-community/react-native-image-picker in your project? you can try with maxWidth, maxHeight props to reduce image size after pick image.
or
you can use https://github.com/ivpusic/react-native-image-crop-picker for pick image. and use compressImageMaxWidth and compressImageMaxHeight props for reduce image size.
I hope it solves the problem.
I used
react-native-image-crop-picker
react-native-image-picker
and did reduce the size of the image and did upload to firebase using base64 => ...putString(Image64, 'base64');...
**The problem was **that when needed to upload 2 images with different sizes firebase upload went wrong. and gave me this
Can currently only create a Blob from other Blobs
I was using blobs before and had the same response to uploading 2 different images
anyone knows what can I do besides uploading the same size and then using firebase functions to resize the images by name?
I'm using the Cordova camera plugin and i have encountered a problem.
When using :
sourceType: Camera.PictureSourceType.PHOTOLIBRARY I get a this url: content://media/external/images/media/1517
When using this url on <img ng-src="{{image}}" alt="Description"/>
everything works great
But when removing the sourceType and taking a picture with the phone the returned URI is something like this:
file:///storage/emulated/0/Android/data/com.ionicframework.myapp/cache/1454450218633.jpg
And when this URI is returning the image is not displayed.
Any ideas? its on ionic framework and on android device.
Some code This is for taking the picture:
function takePhoto() {
var defer = $q.defer();
navigator.camera.getPicture(function(imageData) {
defer.resolve(imageData);
}, function(err) {
defer.reject(err)
});
return defer.promise;
}
This method is being called from:
$scope.getImage = function() {
cameraService.takePhoto().then(function(imageData){
console.log(imageData);
$scope.image = imageData;
}).catch(function(err){
console.log(err);
})
}
and the provider whitelist:
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile|content):|data:image\//);
UPDATE:
I was able to get it done by using Camera.DestinationType.DATA_URL
But isn't it possible to only take the file url and display the image?
Again it is working when selecting the photo from library but not when taking new one.
Problem was with the livereload feature.
Running the application without livereload and then your able to load picuters from that path