'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?

react-native

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shaheen Ghiassy
Solution 2
Solution 3	Xeijp

'Can I pass headers to an image source?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]