React-native-fast-image: Some images are not showing.

Created on 10 Jul 2018 · 31Comments · Source: DylanVann/react-native-fast-image

First, Below is showing well.

<FastImage
              style={s.image}
              source={{
                uri: 'https://unsplash.it/400/400?image=1',
                headers:{ Authorization: 'someAuthToken' },
                priority: FastImage.priority.normal,
              }}
              resizeMode={FastImage.resizeMode.stretch}
            />

But, Below is not showing.

<FastImage
              style={s.image}
              source={{
                uri: 'https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/intro/180529_1.png',
                headers:{ Authorization: 'someAuthToken' },
                priority: FastImage.priority.high,
              }}
              resizeMode={FastImage.resizeMode.stretch}
            />

Why can't I see any image?
Can't I load image from s3?

So I test to upload first image in s3.

Download : "https://unsplash.it/400/400?image=1"
Uri change : : "https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/test.jpeg)"

But it's not showing too.

released

Source

kkotkkio

👍5

Most helpful comment

I had the exact same issue with React-Native 0.60+

I was trying to load images from S3 bucket url (which were public)
It seems that resizing the image with the following code, made it work:

resizeMode={FastImage.resizeMode.contain}

Here is the code used, before:
<FastImage style={styles.image} source={{ uri: item.src, }} />
and after:

<FastImage style={styles.image} source={{ uri: item.src, }} resizeMode={FastImage.resizeMode.contain} />

venix on 24 Dec 2019

👍3 🚀1 ❤1

All 31 comments

And I try to use <Image> of react-native. It's works.
The problem is from to use FastImage and S3 Image.

kkotkkio on 11 Jul 2018

👎2 👍2

I tried another one.

<FastImage
              style={s.image}
              source={{
                uri: 'https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/intro/180529_1.png',
                headers:{
                  Authorization: 'someAuthToken',
                  'Content-Type': 'image/png'
                },
                priority: FastImage.priority.normal,
              }}
              resizeMode={FastImage.resizeMode.stretch}
            />

I added 'Content-Type' but it's still not showing..

kkotkkio on 11 Jul 2018

package.json

{
  "name": "ZzimIos",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "native-base": "^2.7.0",
    "prop-types": "^15.6.1",
    "react": "16.4.1",
    "react-native": "^0.56.0",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-awesome-alerts": "^1.0.6",
    "react-native-blur": "^3.2.2",
    "react-native-carousel-view": "^0.5.1",
    "react-native-fast-image": "^4.0.2",
    "react-native-gifted-chat": "^0.3.0",
    "react-native-keyboard-aware-scroll-view": "^0.4.4",
    "react-native-masonry": "^0.5.0-alpha.1",
    "react-native-navigation": "^2.0.2397",
    "react-native-scalable-image": "^0.2.2",
    "react-native-splash-screen": "^3.0.6",
    "react-native-status-bar-height": "^2.0.0",
    "react-redux": "^5.0.7",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.5"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.2",
    "babel-jest": "22.4.3",
    "babel-plugin-module-resolver": "^3.0.0",
    "eslint": "^4.11.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.2.1",
    "jest": "22.4.3",
    "react-native-debugger-open": "^0.3.17",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

kkotkkio on 11 Jul 2018

I think this project is dead, no response to any thread.

jedashford on 13 Jul 2018

@kkotkkio https://github.com/DylanVann/react-native-fast-image/issues/219

@jedashford just because the maintainer has other stuff to do than responding to the third duplicate of an issue that does not mean the project is dead...

n1ru4l on 16 Jul 2018

😄3

@n1ru4l Thank u for answer :)

I'll still wait for solution to resolve this issue.
I wrote this issue in StackOverFlow too.

I wish to use FastImage.

kkotkkio on 17 Jul 2018

anyone got solution?

deepakverma4 on 24 Aug 2018

@dverma4u did you check #219?

n1ru4l on 24 Aug 2018

@n1ru4l yes i did but my image doesn't have any user agent check. Still not able to display s3 bucket images, but the example image path given in readme works fine

deepakverma4 on 24 Aug 2018

@dverma4u is your s3 image public?

n1ru4l on 14 Sep 2018

Any news? I am in the same situation and I am using RN 0.58 and latest package version.
I can see the developer image of the example but any JPG/PNG from S3 or google images.

IronTony on 10 Feb 2019

Hint: If you convert the S3 image to base64 and pass to FastImage it seems to work

IronTony on 10 Feb 2019

I confirm. If you convert the image to base64 and pass it to FastImage everything works fine.

IronTony on 11 Feb 2019

@IronTony Have you tried testing on a real device? I'm noticing some fast images aren't displaying on my emulator but work fine when on a real device.

douglaswissett on 22 Feb 2019

@douglaswissett nope. I will do as soon as possible. I will tell you if it will work. Thx

IronTony on 22 Feb 2019

@douglaswissett sorry for the late. Yep same problem also on real device, both Android and iOS.

IronTony on 24 Feb 2019

Hi, I just upgraded version to lastest (5.2.0) and it work well.

DucNguyenVan on 3 Mar 2019

👍1

I've had this issue as well with 5.1.1, @DucNguyenVan did upgrading fix it for you?

evanjmg on 1 Apr 2019

i am trying to retrieve an image from an S3 bucket gateway, that is not public, so it has an x-api-key, but it's not working

<FastImage
            style={{ width: '50%', height: 100 }}
            source={{
              uri: item.uri,
              headers: {
                'Content-Type': 'image/jpeg',
                'x-api-key': item.token
              },
              priority: FastImage.priority.high,
              cache: FastImage.cacheControl.web
            }}
            resizeMode={FastImage.resizeMode.stretch}
        />

ghost on 18 Apr 2019

I get images not showing sometimes as well - it doesn't make a difference for the provider. However, my authorization header works fine for my images. It's usually just cache misses for me

evanjmg on 18 Apr 2019

When the image it's too big (600x12041), it does not show up on Android.

"react": "16.8.3",
"react-native": "0.59.9",
"react-native-fast-image": "^6.0.3",

rochapablo on 10 Jul 2019

I'm also having an issue with Firebase storage images not appearing, but it seems to happen in the Android Emulator and not in the device.

 <FastImage
            style={[styles.groupActionIcon]}
            source={{uri: groupImage, priority: FastImage.priority.normal}}
            resizeMode={FastImage.resizeMode.contain}
          />

Any thought on this issue ?

ilibilibom on 17 Dec 2019

add android:usesCleartextTraffic="true" in AndroidManifest.xml work for me, maybe check date time of your device.

  <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>

0x01001 on 22 Dec 2019

❤1 🎉1 👍1

@0x01001 what do you mean by checking date and time ?

ilibilibom on 22 Dec 2019

@0x01001 what do you mean by checking date and time ?

a cause of this problem can be wrong date time of the device, it's about SSL validation failed.
when I change update automatic time zone it's work.

my log:

12-16 22:14:50.118  5821  5821 W Glide   : class com.bumptech.glide.load.engine.GlideException: Failed to load resource
12-16 22:14:50.118  5821  5821 W Glide   : There was 1 cause:
12-16 22:14:50.118  5821  5821 W Glide   : javax.net.ssl.SSLHandshakeException(Chain validation failed)
12-16 22:14:50.118  5821  5821 W Glide   :  call GlideException#logRootCauses(String) for more detail
12-16 22:14:50.118  5821  5821 W Glide   :   Cause (1 of 1): class com.bumptech.glide.load.engine.GlideException: Fetching data failed, class java.io.InputStream, REMOTE
12-16 22:14:50.118  5821  5821 W Glide   : There was 1 cause:
12-16 22:14:50.118  5821  5821 W Glide   : javax.net.ssl.SSLHandshakeException(Chain validation failed)
12-16 22:14:50.118  5821  5821 W Glide   :  call GlideException#logRootCauses(String) for more detail
12-16 22:14:50.118  5821  5821 W Glide   :     Cause (1 of 1): class javax.net.ssl.SSLHandshakeException: Chain validation failed
12-16 22:14:50.121  5821  5821 I Glide   : Root cause (1 of 1)
12-16 22:14:50.121  5821  5821 I Glide   : javax.net.ssl.SSLHandshakeException: Chain validation failed

0x01001 on 22 Dec 2019

🎉1 👍1

I had the exact same issue with React-Native 0.60+

I was trying to load images from S3 bucket url (which were public)
It seems that resizing the image with the following code, made it work:

resizeMode={FastImage.resizeMode.contain}

Here is the code used, before:
<FastImage style={styles.image} source={{ uri: item.src, }} />
and after:

<FastImage style={styles.image} source={{ uri: item.src, }} resizeMode={FastImage.resizeMode.contain} />

venix on 24 Dec 2019

👍3 🚀1 ❤1

I had issues with some images not showing. Changing the cache mode to web fixed it for me.

<FastImage
  style={{
    width: imageSize,
    height: imageSize,
    borderRadius: borderRadius,
  }}
  source={{
    uri: imageUrl,
    cache: FastImage.cacheControl.web
  }} 
/>

doug-stritt on 27 Jan 2020

I found out why this was happening, and it only seems to affect iOS, because Android was fine.

Apparently when a source like { uri: "https://some.domain.com/image.png" } is used, the headers being sent out in the download request do not include Host: some.domain.com, which will trip most servers. Previously requests were failing with onError being called, but without additional information. (#200 would be nice to have too)

I've had to set a breakpoint in the objective C code to find this and noticed a 404 error being returned by the server.

Manually supplying the host header, like { uri: "https://some.domain.com/image.png", headers: { Host: "some.domain.com", Accept: "*/*" } } makes it work.

Out project already had fast-image implemented and working, but because of a side effect of AWS S3 signatures, we were issuing headers which included the host header in a different part of the app, and that part was working properly. It was only after attempting to use non-aws resources that it started occuring.

Related: #219

cc @DylanVann

andreialecu on 4 Jun 2020

Additionally, I noticed another issue with 302 redirects. When using Google Maps places images, the uri returned for the image is a 302 redirect from maps.googleapis.com/.... to lh3.googleusercontent.com/....

In this scenario there would need to be two requests, with different Host headers. I'm not sure how to workaround it from user-land without fixing the library itself.

Some discussion here: https://github.com/SDWebImage/SDWebImage/issues/2841 also here: https://github.com/SDWebImage/SDWebImage/issues/1226

andreialecu on 4 Jun 2020

There is a serious problem with http headers, I have opened #690

Issue was confirmed at https://github.com/SDWebImage/SDWebImage/issues/3031#issuecomment-639376964

andreialecu on 5 Jun 2020

:tada: This issue has been resolved in version 8.3.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: