Can I pass headers to an image source?

Question

My image-source is secured, so ideally I would like to do the following:

<Image source={{uri: "http://path/to/image", 
                headers: {Authorization: 'Bearer ' + this.props.bearerToken}}}/>

Is there anyway I can approximate that, short of loading the image into Javascript and rendering the image from there?

I understand this question is pretty dated at this point, but I came upon it while searching for an answer and yes, you can. It's implemented to work exactly how you have it formatted in your question, although you'd have to account for whether http is correct vs https depending on other factors. https://reactnative.dev/docs/image#imagesource — Dwigt, May 02 '22 at 19:44

score 25 · Answer 1 · edited Oct 19 '22 at 17:12

25

React Native supports adding header or body in requesting image. UPDATED: See this.

 <Image source={{
      uri: 'https://facebook.github.io/react/img/logo_og.png',
      method: 'POST',
      headers: {
        Pragma: 'no-cache'
      },
      body: 'Your Body goes here'
    }}
    style={{width: 400, height: 400}} />

edited Oct 19 '22 at 17:12

Blundering Philosopher

6,245
2
43
59

answered Nov 16 '17 at 08:31

Aung Myat Hein

4,018
1
36
42

Cè-zù. This is new, isn't it? – Michael Lorton Nov 16 '17 at 18:20
How to display octet-stream image from server url?. – Hradesh Kumar Feb 08 '19 at 07:26
1

Link to docs is out of date. New url which points to Image -> ImageSource which contains headers, etc. is https://reactnative.dev/docs/image#imagesource – Dwigt May 02 '22 at 19:42

score 6 · Accepted Answer · answered Jun 20 '16 at 20:17

6

This capability has recently been merged into React-Native: https://github.com/facebook/react-native/pull/7338/files

answered Jun 20 '16 at 20:17

Shaheen Ghiassy

7,397
3
40
40

this is promising, however as of the moment of this comment, android feature is not merged, https://github.com/facebook/react-native/pull/7791 – Oscar Franco Aug 08 '16 at 23:02

score 1 · Answer 3 · answered May 12 '16 at 16:31

1

I have this problem before, but Image component does not support this feature right now.

You may try react-native-fetch-blob to get BASE64 string of the image url and set its source this way

    <Image source={{uri : BASE64_IMAGE_STRING}}/>

answered May 12 '16 at 16:31

Xeijp

853
1
7
18

1

That's exactly what I _am_ doing, and wish to cease doing. – Michael Lorton May 12 '16 at 18:12
Also base64 encoded images as RN Image sources are really slow – Luis Paulo Sep 14 '20 at 14:41

Can I pass headers to an image source?

3 Answers3

Linked