question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ImageSource in Image doesn't send headers

See original GitHub issue

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® Core™ 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

image image image

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:6

github_iconTop GitHub Comments

2reactions
Tran-Minh23commented, Apr 26, 2022

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

1reaction
raartscommented, Feb 26, 2022

I am experiencing the exact same problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can I pass headers to an image source? - react native
React Native supports adding header or body in requesting image. ... I have this problem before, but Image component does not support this ......
Read more >
Image source with custom Http Headers - MSDN - Microsoft
I'm currently binding my Image Source in XAML to a full URL path. ... I've to add custom http headers with an applicationKey...
Read more >
next/image - Next.js
Enable Image Optimization with the built-in Image component. ... the sizes property configures how next/image automatically generates an image source set.
Read more >
How to display an image protected by header-based ...
How do you display such an image in a web page? ... This won't work because an <img> tag cannot send a custom...
Read more >
How to insert 2 pictures into the HEADER of a ... - Telerik
Anyone know how to adding 2 images in the header , one on the left and one on the right? ... Image.ImageSource =...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found