Question

在React Native中我可以使用<Image source={{uri: 'http://my.server.com/user/id/image/id.png'}} />

的图像

问题是用户图像受JWT令牌保护，我在头文件中传递。

是否有可能以某种方式包含额外的标头？

我的其他选择是什么？

谢谢！

Answer 1

您可以在源支柱中发送标题。

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

您也可以指定其他参数： ImageSourcePropType.js

Answer 2

对我来说，blink281 的答案不起作用。根据此线程 https://github.com/facebook/react-native/issues/25945 似乎这是一个常见的 Android 问题，并且在编写此内容时并未修复。我正在寻找另一种解决方案，而 Samuli Hakoniemi 的回答帮助我构建了一个解决方案，因此我想分享一个完整的示例，因为他的 Link 不再有效。

我为此创建了一个名为 NetworkImage 的外部组件。

import React from "react";
import { StyleSheet, View, Image } from "react-native";

class NetworkImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      base64: null,
    };
    this.style = props.style;
    this.imageId = props.imageId;
    this.token = props.token;
  }
  componentDidMount() {
    var imageUri = "/auth/diary/image/" + this.imageId;
    fetch(imageUri, {
      method: "GET",
      headers: {
        Pragma: "no-cache",
        "x-access-token": this.token,
      },
      redirect: "follow",
    })
    .then((res) => res.text())
    .then((content) => {
      let data =
        "data:image/jpeg;base64," +
        content.substring(1, content.length - 1);
      this.setState({
        base64: data,
      });
    });
    });
  }
  render() {
    return <Image style={this.style} source={{ uri: this.state.base64 }} />;
  }
}

export default NetworkImage;

在这种情况下，我不得不在前面加上“data:image/jpeg;base64”，因为我得到的数据是没有数据类型的原始数据。

Answer 3

您的选项是这样的：https://rnplay.org/apps/UowZmw（为了查看模拟器，在开发控制台中键入document.querySelector('.editor-container').style.width = '50%'，RNPlay有点内容冗长）。

基本上你做的是： 1.将你的图像作为blob服务 2.使用fetch()将其移至应用。 3.使用base64数据作为uri属性

的内容

在componentWillMount()：

中执行此操作

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

您可能会注意到我使用res.text()代替res.blob()。这是因为在写这篇文章时，RN并不支持.blob（）。

这是render()：

return (
  <Image style={styles.base64} source={{uri: this.state.base64}} />
)

Answer 4

在响应本机中的图像标签中发送标题

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

ref

使用“承载”身份验证令牌来反应本机映像

4 个答案: