CODEWITHSUNDEEP
react-native
Michael Lorton
Michael Lorton

Reputation: 44396

Can I pass headers to an image source?

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?

Upvotes: 21

Views: 17314

Answers (3)

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

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}} />

Upvotes: 27

Shaheen Ghiassy
Shaheen Ghiassy

Reputation: 7517

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

Upvotes: 6

Xeijp
Xeijp

Reputation: 873

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}}/>

Upvotes: 1

Related Questions