React Native Image with 'Bearer' authentication token

后端 未结 3 473
星月不相逢
星月不相逢 2020-12-31 11:41

In React Native I can use images with

The problem is that user images are

相关标签:
3条回答
  • 2020-12-31 12:34

    Your options are this one: https://rnplay.org/apps/UowZmw (in order to see the simulator, type document.querySelector('.editor-container').style.width = '50%' in dev console, RNPlay is a bit broken with lengthy content).

    Basically what you do is to: 1. serve your images as blobs 2. fetch them with fetch() to the app. 3. use base64 data as content of uri property

    Do this in your componentWillMount():

    fetch(YOUR_IMAGE_URI, {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer ' + 'TOKEN'
        }
      }
    ).then((res) => res.text())
    .then((content) => {
      this.setState({
        base64: content
      })
    })
    

    You may notice I use res.text() instead of res.blob(). This is because, while writing this, RN doesn't support .blob().

    And this goes to render():

    return (
      <Image style={styles.base64} source={{uri: this.state.base64}} />
    )
    
    0 讨论(0)
  • 2020-12-31 12:38

    You can send headers in the source prop.

    <Image
        source={
        { uri: 'https://yourdomain.com/get-image',
          headers: {
                    Authorization: 'Bearer xyz'
                   }
                }
         }/>
    

    you can specify other parameters as well: ImageSourcePropType.js

    0 讨论(0)
  • 2020-12-31 12:42

    Send Header in Image tag in react native

    <Image source={{ uri: 'url',
          headers: {Authorization: 'Bearer *******'}
     }}/>
    

    ref

    0 讨论(0)
提交回复
热议问题