ImageSource in Image doesn't send headers

[ash-williams]

Description

According to the docs, the ImageSource prop in the Image component should allow for sending headers like this:

<Image
    source={{uri: "http://myimage.com", headers: {"Authorization":token}}}
/>

However, the headers aren't sent in any request.

Version

0.64.3

Output of npx react-native info

System: OS: Windows 10 10.0.19042 CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz Memory: 2.02 GB / 15.85 GB Binaries: Node: 16.13.2 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 27, 28, 29 Build Tools: 27.0.3, 28.0.3, 29.0.2 System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | China version of Wear OS Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 3.5.0.0 AI-191.8026.42.35.6010548 Visual Studio: Not Found Languages: Java: 11.0.11 - C:\Program Files\AdoptOpenJDK\jdk-11.0.11.9-hotspot\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. Create a project (I've been using Expo but don't see how that would be an issue)
2. Import image from 'react-native'
3. Try sending any header e.g.: <Image source={{ uri: "url to any image", headers: { "Content-Type": "image/jpeg", "X-Authorization": "thisismyauthtoken" } }} />
4. Inspect the HTTP request, no headers are sent (I'm running in browser and using Chrome dev tools to inspect HTTP)

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

[raarts]

I am experiencing the exact same problem.

[Tran-Minh23]

Any solution here guys? I'm facing the same problem. The header in Image acting really weird on Android, but on IOS everything is still smooth

[ash-williams]

I was teaching a University unit when I posted the issue. The workaround we had to go with was to send a regular GET request with the headers to get the image, convert the response to a base64 string, and then use that string as the source to the Image component.

It works fine as a solution, but this issue is still valid as the component doesnt work as the documentation says it should.

[Tran-Minh23]

I was teaching a University unit when I posted the issue. The workaround we had to go with was to send a regular GET request with the headers to get the image, convert the response to a base64 string, and then use that string as the source to the Image component.

It works fine as a solution, but this issue is still valid as the component doesnt work as the documentation says it should.

Thank you. Seems like it's a well-known bug, I found another topic of this on 2019 (https://github.com/facebook/react-native/issues/25945).

[revitteth]

Is there any progress on this one? It's a bit of a painful blocker unless we send auth material via query string...

[NilsBaumgartner1994]

Please fix this