<Image/ > Get Mixed Up on Android


#1

Platform: Nativescript for Angular
Device: Android Emulator (4.4.2) & Genymotion (4.4.4)

Hi guys, I used <Image /> for images in the app, something like this:

<slide *ngFor="let banner of banners">
    <Image [src]="banner.full_path" stretch="aspectFill" height="180" (tap)="onBannerClick(banner)"></Image>
</slide>

Where full_path is the http url to the image. Everything works fine in newer version of android, but in lower version (4.4.2), the images seems to be mixed up randomly with other <Image/> elements in the app. Is there any specific reason on why this is happening?

For example: this high heel image doesn’t belong here, it’s from another <Image /> further below.

UPDATE 2017-01-25

It turns out this also happens in at least 6.0.1. I’ve also tested with several real device on the published apk from the app store; with similar results.


#2

I’ve seen this issue a couple different ways;
Are you by any chance scrolling down and then back up and seeing the wrong image in place?

https://github.com/NativeScript/NativeScript/issues/3058


#3

Hi @NathanaelA, we meet again. :smile:

To answer your question, nope. It’s there on load.

Someone on slack (@ntucakovic) pointed out that it might be because of nested loop and the loop index gets mixed up, but I can assure there’s no nested loop, at least in the banner.

I can also verify that the correct image urls are passed from the API, this is verified by dumping the data right before it is pushed into the array.

p/s: This is angular 2 btw.


#4

No what I was curious about is:
If you start the app and not do anything – does the image retrieved fine, if you scroll down in your list then come back up to the top is that when the image is messed up?


#5

Nope, it happened on load.

E.g:

  1. I opened the app 1st time, the image is fine.
  2. I close it, opened it 2nd time, some images are now mixed up.
  3. & so on…

Some things to note:

  • Scrolling doesn’t affect the images.
  • It’s also doesn’t ALWAYS happen.
  • When it does happen, images are “randomly” mixed up every time it happened, means that high heels might not be at the banner, it might be different images, etc.

#6

Hmm, I can’t say that I’ve ever seen it mess it up w/o scrolling.

Are you 100% sure you image list is correctly being fed to the component and it isn’t going through something like rxjs? Have you tried adding a click handler to the images and then outputting what the file is supposed to be vs what it is?

I think some code will have to be provided (even a small demo app that exhibits the behavior).


#7

Hi @NathanaelA,

I’ve simulated the issue. You can see it in the following gif:

As you can see, in the first few secs, after it launched, the images loaded correctly, however few moments later, some changed to a different image. This time, it affect the Hot Deal and Vinyl Collection.

I also added on clicked logs that displays the image full path that I passed to [src].

It seems like it has something to do with the image cache or its index.


#8

I remember facing a similar issue when I used 4+ images inside a GridLayout but didn’t pay it much attention. If you are certain it’s a bug post an issue over at https://github.com/NativeScript/NativeScript.


#9

An update to this issue:

I’ve found out this happened because of this plugin: https://github.com/TheOriginalJosh/nativescript-ng2-slides

I’m not sure it’s because the use of *ngIf in the component or the plugin itself; but it’s confirmed the issue stopped once I remove the plugin’s markup.

In the mean time, I’ve also posted an issue there: https://github.com/TheOriginalJosh/nativescript-ng2-slides/issues/8


#10

UPDATE: I’ve found out it’s a problem with how Android handle <Image />, so I use Fresco instead and everything is fine now.

Thanks everyone!


#11

Hi everyone, I am facing with similar problem just exactly like @Nathanael has said.