Image not show on android, but still working on IOS

[vinhtran6921]

Describe the bug When I show image with url, android device not showing but still show on IOS

              <FastImage
                    source={{uri: 'https://via.placeholder.com/150/810b14'}
                    style={style}
                    resizeMode={resizeMode}
                    onLoadStart={this.onLoadStart}
                    onLoadEnd={this.onLoadEnd}
                />

Dependency versions

• React Native version: 0.62.2
• React Native Fast Image version: 8.3.0

[vinhtran6921]

Any helps? I still stuck at this

[jordangrant]

@vinhtran6921 does a regular <Image component show on Android?

[vinhtran6921]

Yes. <Image will work but I want to use FastImage. How can I fix it? Pls help

[jordangrant]

@vinhtran6921 does that url with http:// work? Do other urls work?

[tsdmrfth]

Same issue here. Images are not loaded. It works on iOS correctly. URL starts with https://

[vallvien]

Can this be a problem specifically related to images from placeholder.com? We are facing the same issue, this url https://via.placeholder.com/300/09f/fff.png works in the browser and on iOS but does not display the image on Android. When <FastImage /> is swapped with RN <Image /> on Android, the same url works fine as well.

[mdoesburg]

Happens when upgrading package from 8.2.0 to 8.2.1+. Must be related to this bug fix. I am using local images and I experience the images disappearing on Android.

Current workaround is to lock version to 8.2.0.

It might be worth noting that I do use the fallback prop which is what the bug fix is related to:

fallback={ANDROID || resizeMode === 'repeat'}

The bug fix description:

iOS image has its own properties for cache and if fallback is true and regular image is being rendered we can't set FastImage's cache value because it doesn't match.

@DylanVann Maybe the fix would be to check if the OS is actually iOS, since I only use fallback for Android, and this bug fix is specifically only targeting iOS?

[mdoesburg]

@milansusnjar Could you take a look at this, since the code linked to in my previous comment seems to be authored by you?

[bluenex]

I have just experienced this too. I have just upgraded to version 8.2.0. There is no problem on iOS, only not show on Android. It also triggers onError but I haven't checked yet whether there is a message.

Note that before I upgraded to 8.2.0 I was at 7.0.2 and there was the exact same issue (image doesn't show on Android).

[milansusnjar]

@mdoesburg I tested it and it doesn't work with the image from OP's example but it works with another URL. Doesn't work: source={{uri: 'https://via.placeholder.com/150/810b14'} Works: source={{uri: 'https://unsplash.it/400/400?image=1'}} The rest of the code is the same. I'm not sure how this could be connected with my PR.

[milansusnjar]

It doesn't work with v7.0.0 for me.

Glide fails, here is the log from my phone:

2020-09-02 21:22:26.679 16922-16922/com.blogl10n W/Glide: Load failed for https://via.placeholder.com/150/810b14 with size [600x600]
    class com.bumptech.glide.load.engine.GlideException: Failed to load resource
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
      Cause (1 of 1): class com.bumptech.glide.load.engine.GlideException: Fetching data failed, class java.io.InputStream, REMOTE
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
        Cause (1 of 1): class com.bumptech.glide.load.HttpException: Gone
2020-09-02 21:22:26.680 16922-16922/com.blogl10n I/Glide: Root cause (1 of 1)
    com.bumptech.glide.load.HttpException: Gone
        at com.bumptech.glide.integration.okhttp3.OkHttpStreamFetcher.onResponse(OkHttpStreamFetcher.java:73)
        at okhttp3.RealCall$AsyncCall.execute(RealCall.java:206)
        at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at java.lang.Thread.run(Thread.java:919)
2020-09-02 21:22:26.693 16922-16922/com.blogl10n W/Glide: Load failed for https://via.placeholder.com/150/810b14 with size [-2147483648x-2147483648]
    class com.bumptech.glide.load.engine.GlideException: Failed to load resource
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
      Cause (1 of 1): class com.bumptech.glide.load.engine.GlideException: Fetching data failed, class java.io.InputStream, REMOTE
    There was 1 cause:
    com.bumptech.glide.load.HttpException(Gone)
     call GlideException#logRootCauses(String) for more detail
        Cause (1 of 1): class com.bumptech.glide.load.HttpException: Gone
2020-09-02 21:22:26.695 16922-16922/com.blogl10n I/Glide: Root cause (1 of 1)
    com.bumptech.glide.load.HttpException: Gone
        at com.bumptech.glide.integration.okhttp3.OkHttpStreamFetcher.onResponse(OkHttpStreamFetcher.java:73)
        at okhttp3.RealCall$AsyncCall.execute(RealCall.java:206)
        at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at java.lang.Thread.run(Thread.java:919)

This is the code to reproduce

<FastImage
    style={{width: 200, height: 200}}
    source={{uri: 'https://via.placeholder.com/150/810b14'}}
    onError={(e) => { console.log('e', e); }}
    resizeMode={FastImage.resizeMode.contain}
/>

[alansoliditydev]

I have this issue, too

[zabojad]

What I observe is that it seems to happen on Android versions < 9 only. Do you all confirm?

[byeokim]

I am having this issue on Android 10, with RNFI version of 8.3.4.

[zabojad]

OK, in my case, it was a SSL issue happening only on Android < 9 because the certificate did not support TLS V1.2

We are having different issues here. Would be useful if you guys could inspect and post here your logcats logs related to this issue... In my case, again, it was SSL handshake failing...

[byeokim]

Thank you. I found cause of my issue. Fast Image couldn't get images from server because request had been sent without session cookie in request header. iOS build has no problem with getting images. So it seems that it's Glide that doesn't automatically attach session cookie to request header.

[dragonlong206]

I am facing the same issue. @byeokim How do you resolve it?

[byeokim]

@dragonlong206 I haven't resolved yet. I am currently using fallback prop as @mdoesburg suggests while digging into solution.

[dragonlong206]

In my case, the problem is SSL certificate of image's server. It's an incomplete chain certificate. I can see the error in logcat.

[pqminh]

+1

[suwu150]

I also encountered this problem. After repeated testing, I found that only super long graph can cause this problem. Is there any solution

[cheese-git]

In my case, this problem is caused by not sending cookies to the server. I'm using axios(which uses XMLHttpRequest internally) to request session, and I solved this problem by simply installing rn-fetch-blob, which includes polyfills of XMLHttpRequest.

Maybe we could add rn-fetch-blob as a dependency/peerDependency of this library.

[hansanwok]

This works for me, use fallback if fast image can not load image

const getUriImage = (uri) => { return uri !== null && uri !== undefined && uri.includes('/') && uri.includes('.') ? uri : ''; };

const ProgressiveImage = (props) => { const {source} = props;

const [hasError, setHasError] = useState(false);

return source?.uri ? ( <FastImage {...props} fallback={hasError} onError={() => setHasError(true)} source={{ uri: getUriImage(source?.uri), cache: FastImage.cacheControl.immutable, }} /> ) : ( <Image {...props} /> ); };

[AD1N1993]

I have this issue, too

[avinashsahoo]

Anyone got a solution to this?

[dio-ralali]

facing the same issue here. anyone got solution?

package.json :

"react-native-fast-image": "8.1.5", "react-native": "^0.64.2",

[SDE-Arvind]

facing same issue, please provide solution for this

[Shafran123]

Try Commenting cache if you are using this works for me!

cache:FastImage.cacheControl.cacheOnly

[amerllica]

Hi dear @byeokim, what should I add to the header?

<FastImage
  source={{
    uri: 'https://picsum.photos/536/354',
    headers: {
      key: 'value', // <== what should I add here?
    },
  }}
/>

[byeokim]

Hi dear @byeokim, what should I add to the header?

<FastImage
  source={{
    uri: 'https://picsum.photos/536/354',
    headers: {
      key: 'value', // <== what should I add here?
    },
  }}
/>

Regarding my comments above I meant

<FastImage
  source={{
    uri: ...,
  }}
  fallback={Platform.OS === 'android'}
/>