React-native-fast-image: Not able to load images from Amazon s3 bucket

[snuzi]

Hi there,
FastImage is not able to load image from Amazon S3 bucket. The image is public and ContentType image/jpeg.
Does anyone faced this issue before? I would appreciate if someone can help me with a workaround.

Thanks.

[n1ru4l]

I am loading lots of images from S3 without any issues. Can you give more information? A link to one of those images could be helpful!

[bfdevelop]

Hi @n1ru4l
https://s3.eu-central-1.amazonaws.com/megroplan-test/recipe/1528058084_BuNpnvWM44.jpeg

The image is displayed using from React Native.

I have a Flatlist and below is my render item:

Please find the code in the link because inserting as code gets broken here:
https://docs.google.com/document/d/1rmddkPH6kH831VjHeyR_n2KG5bNE2q2banPnAcXSwbg/edit

[n1ru4l]

@bfdevelop Are you able to load other images, beside those from your s3 bucket?

[bfdevelop]

@n1ru4l Yes, I can load other images, even large images.
You did not use any special properties, right?

[n1ru4l]

@bfdevelop Did you resolve the issue? If so please comment your solution for other users that experience this issue!

[DylanVann]

Someone else had an issue similar to this and they found they had some kind of user agent check preventing the image from loading.

[brayanL]

I have the same issue the images not load for aws services. is there any solution..?

[abhirup03]

I too have the same issue, I am passing sample image uri's in the fast-image tag and rendering it. But no Images are displayed.
Below is the code:

````
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import FastImage from 'react-native-fast-image'

const YourImage = () => (
console.log("this is called"),
style={styles.image}
source={{
uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)

export default YourImage;
````

[abhirup03]

I am not loading any images from S3. All i am doing is passing a sample image Uri, but all i see is a blank screen.

[Desteel]

I am not loading any images from S3. All i am doing is passing a sample image Uri, but all i see is a blank screen.

You need remove this string headers: { Authorization: 'someAuthToken' }

This work for me.

[zach-luman]

Any solution here?

[arashkevich25]

any updates?

[andreialecu]

See https://github.com/DylanVann/react-native-fast-image/issues/242#issuecomment-638732002 for some ideas on things to try.

[aerolalit]

If your backend is validating user-agent for the authorization token, check if the user-agent used for generating auth token is same for fast image as well.

In my case setting the right user-agent fixed the problem.

`` import { getUserAgent, getUserAgentSync } from 'react-native-device-info'; const source = { uri: 'http://yoururl', headers: { Authorization:Bearer ${TokenService.getValidAccessTokenSync()}`,
'user-agent': getUserAgentSync()
},
}

[Herry-Lab]

Please try this format may be it works

key={idx}
src={{
uri: 'http://yoururl' + '?noCache=' + Math.random().toString(),
method: 'GET',
headers: { 'Access-Control-Allow-Origin': '*'},
body: ''
}}
/>