In the application that I am creating I am using a listview which uses a Gamecard component. Inside this component we are using the Image component which gets images from an Azure blob storage. This works for most of the times but there are certain cases that this doesn't work.
When this occurs the onError event gets triggered but in the event I don't get any error returned so investigating the problem is pretty hard.
I am catching it like follows:
source={{uri: config.storage.endpoint + this.state.game._id + "/" + this.state.game._id + '-compr'}}
onError={(err) => {
console.log('Something happened!')
}}
I have tried reading the err object but nothing usefull coming out of this object.
The images are relatively small (with size and MB) so I am lost on where to search next.
Hope somebody can help me out.
Related
I am using onProgress event of Image component from react-native to try to get the file size in bytes of the remote image (the source uses uri).
In iOS everything works great, however in Android sometimes is undefined and other times it just return a random value like 10000.
Do you know any solution for this? I would like to keep using only Image from react-native, ie, I want to avoid to have to install a third party library or re-fetching the server.
const handleOnProgress = (event: OnProgressEvent) => {
const filesize = event.nativeEvent.total; // does not work in Android
}
<Image
...
onProgress={handleOnProgress}
/>
Currently, I am using this plugin
https://github.com/erobertson42/cordova-plugin-xapkreader/tree/cordova-9
I am using this path to show the image -
'content://com.x.x/main_expansion/assets/dummy.png';
and to make image path safe I am using domSanitizer.bypassSecurityTrustUrl method
getImg(img) {
img = this.domSanitizer.bypassSecurityTrustUrl(img);
return img;
}
Whenever I am using my app, it is working very slow but I am going one by one on the screen throughout the app first time it stucks on every screen approx 40 to 60seconds but after taking sometime it will work normally. If anybody has any suggestion or concern, please share
I want to consider all possible cases for loading an image.
My project allows the user to answer some questions based on some images. In ANDROID I have had problems in some occasions when these images are loaded. This causes a great negative impact, since the user has no idea what to answer.
Example code:
<Image
style={styles.imageBackground}
source={{ uri: obj.question }}/>
After many tests, it seems to fail for some strange reason. I have seen some topics about this here
Whatever the case (the above mentioned or simply in the process of loading the internet connection fails), I would like to be able to reload the images again.
It occurred to me to use onError event and put something there that would allow me to set the source for the second time
<Image
ref={'image' + key}
style={styles.imageBackground}
source={{ uri: obj.question }}
onError={(e) => {
this.refs['image' + key].setNativeProps({ src: [{ uri: obj.question }] })
}} />
The line inside the onError does not work for me. Even if it worked, there are some aspects that should be considered. For example, it could be causing an infinite loop and you would have to have a variable to control how many times the line would be in the onError line.
I would like to ask if this idea makes sense or if they have any other better.
PDTA:
1) Setting a defaultSource is not an option, as it would seriously affect the ux.
2) All images should load without problem, since they are previously stored in the server with fixed paths. This makes it very unlikely that images can not load. The only 2 shapes I can think of are the ones I mentioned above
I am experiencing a strange bug in PhoneGap on Android 4.4, for which I couldn't find any solution online. In my app, I am loading a lot of different images from a remote server, and as the user navigates back and forth, new images are loaded on each page (4 at a time, to be specific, through jQuery-generated html). After having navigated back and forth for a little while, some images will randomly not show up and instead show the typical "broken image" icon.
Now, here comes the strange part: I have been following the instructions at jQuery/JavaScript to replace broken images and done a few tests of my own. In conclusion, the naturalWidth and naturalHeight parameters report the right sizes of the images, and complete reports true for all images. Therefore, the solutions mentioned in the above SO thread don't work at all. Changing the image src doesn't help, either with or without a setTimeout (I tried adding the current timestamp as a parameter to the image path as well).
Did anyone else encounter this issue at all, or am I going crazy here? :)
EDIT: By the way, no error is ever reported. Therefore, no error handler is called when loading the image, making it useless to solve the problem with the already suggested methods (see the link above).
This is how i handle error images,
<img src="images/imageName.jpg" onError="onErrorFunc(this);" alt=" " />
function onErrorFunc(elem){
var imgUrl = "https://alternative-image";
elem.onerror = function (){
elem.src='images/noimage.jpg';
}
elem.src=imgUrl;
}
Hope it helps!
I'm currently using Picasso 2.0.1(also tried 1.0.2 before) and obtaining bitmaps from pictures on the web.
All is working great, I've seen improvements in loading the images ... at least it seems faster.
My question is, how can I get statistics from the activities done by PICASSO? I wanted to know if the picture was obtained from the cache or downloaded ...
I'm trying to obtain information with com.squareup.picasso.StatsSnapshot, however it doesn't seem to get updated... or I'm not using it correctly.
Picasso pi = Picasso.with(getActivity().getApplicationContext());
Bitmap bitmap = pi.load(url.toString()).get();
Log.d(this.getClass().getSimpleName(),"Cache hits:" + pi.getSnapshot().cacheHits + " Cache misses:" + pi.getSnapshot().cacheMisses);
adding a log before and / or after the load call always return the same result
Cache hits:0 Cache misses:0
What am I doing wrong or how can I obtain this information?
Thanks in advance!
Marc
To get the colored triangle that David Hewitt is describing, you actually have to use setIndicatorsEnabled like so
Picasso.with(mContext).setIndicatorsEnabled(true);
You can get stats in your logs for Picasso by using setLoggingEnabled like so
Picasso.with(mContext).setLoggingEnabled(true);
You can search the log with a "Picasso" filter and see where Picasso gets the image and how long it takes. Very handy!
According to the website here:
http://square.github.io/picasso/
You can do setDebugging(true) and it will place coloured triangles in the corner or each image that will indicate whether they were loaded from the web, the disk or memory. I can't find any specific reference to the functions you were using on the website, but this may meet your needs instead.
You can call this from the onStop() or onPause of your Activity or Fragment
StatsSnapshot picassoStats = Picasso.with(context).getSnapshot();
Log.d("Picasso stats ", picasspStats.toString());
then from the Android logcat select verbose and filter by Picasso.
You will get a log something like the following:
Picasso stats: [main] StatsSnapshot{maxSize=76695844, size=75737296, cacheHits=656, cacheMisses=1091, downloadCount=8, totalDownloadSize=213376, averageDownloadSize=26672, totalOriginalBitmapSize=437547196, totalTransformedBitmapSize=609434304, averageOriginalBitmapSize=527801, averageTransformedBitmapSize=735143, originalBitmapCount=829, transformedBitmapCount=826, timeStamp=1484426664382}
'get()' is synchronous and skips the cache. Use one of the 'load()' methods to harness Picasso's full powers.