Images with Headers Authentication are not showing.

[Biplovkumar]

Description

I am showing headers Auth Images via 'GET method but some images are showing fine and some are not.
in IOS & Android not showing.
The onLoadEnd method also calling fine but still image not showing.
I am Stuck in the last 5 Days.
I think some images are late coming from the URL so maybe the Image tag doing timeOut.

React Native version:

    "react": "16.13.1",
    "react-native": "0.63.2",

System:
OS: macOS 10.15.6
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 87.70 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.0. - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2, 29.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-Q | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 12.0/12A7209 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_221 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
react-native-macos: Not Found

Steps To Reproduce

1. Added Image tag
2. Passed URL Link and Authentication too but in 100 images some of the images are showing and some of the images are not showing.

Expected Results

All Images Need to show fine.

Snack, code example, screenshot, or link to a repository:

<Image style={{width: 200, height: 200}} source={{uri: ImgURL, headers: {Authorization : 'OAuth 0000000000', },}} onLoadEnd={()=>{console.log("Loaded")}} />

[Biplovkumar]

@admin plz help .

[jeswinsimon]

Since there are 100 images it is not easy for others to do a repro. Could you try someone debugging and find a similarity between the images that are not loading. Check loading the images using curl or postman to check if the url's are valid. Check the size or file to see if there is any similarity. More information would be helpful to troubleshoot this issue.

[Biplovkumar]

Those Images are showing in postman. But not in our app.
Just create min 10 images with authentication, which is less size.
Then you will be able to regenerate the issue.
@jeswinsimon .
Thanks for the reply.

[kylerc]

I've also been running into this issue. It seems like #25945 might be an older issue for this same thing that was closed, but never actually resolved. It seems like on android only, that image headers either don't send, or don't send in all conditions resulting in the image not being able to render.

[fairlycasual]

Same issue here after upgrading to 0.63.3 from 0.61.4, on Android only.
For reference, the image component appears to be stripping off our Headers (containing Authorization token, and Correlation ID) when the request leaves. Our current implementation for accessing photo resources relies on a call to our Photos service api that provides a 307 response redirect to an external storage url for photos. We have implemented a work-around that pre-fetches the redirect url using Axios interceptors, and then passes this url along to the image component as that url does not require any headers or authorization.

[rastuch]

sames here, i trying get image from remote url with auth headers and sometimes is just not working. In onError props i have nativeEvent.error with status code 401, but when i was debugging it turns out that image server do not have any request from mobile app. When i change the url to without auth, the image was downoload.

[bnap00]

same issue

[asaadawey]

any news ?
same here

[odyRafaelM]

This is an ongoing issue, headers are not being sent.

[marcesengel]

Hello,

I'm currently looking into this issue. It seems to be located in com.facebook.react.views.imagehelper.MultiSourceHelper.MultiSourceResult, as I can only reproduce it when passing multiple sources. When I temporarily cut down the list to a length of 1, the image will be loaded (and thereby the cache populated). After that it will show at least the cached image, even when switching back to multiple sources, as this is loaded here

react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java

Lines 662 to 666 in 6be46b0

	MultiSourceResult multiSource =
	MultiSourceHelper.getBestSourceForSize(getWidth(), getHeight(), mSources);
	mImageSource = multiSource.getBestResult();
	mCachedImageSource = multiSource.getBestResultInCache();
	return;

The temporary fix is to only pass lists of length 1 on Android.

I will update this as soon as I have fixed the issue or at least found the root cause in case I can't go ahead and fix it.

Edit: I just now realised this issue was about single pictures, I guess I should open a new issue for this.

[NilsBaumgartner1994]

having still the problem

[donatoferrulli]

any news ?

[ameyarumbleon]

any updates?

[nathanael-e]

I also encounterd this problem.

A workaround, if possible, is to include the token as a query string instead.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[NilsBaumgartner1994]

Any updates on this?