从需要发送标头的服务器加载图像

Question

我想从需要令牌的服务器加载图像，但我不知道如何在 axios 的标头中发送令牌或获取请求以加载它。如何发送带有 url 的标头以从我的 React 应用程序中的服务器加载我的图像？

这是我的图片标签

<img 
   src={{
    uri: `${activeCoverHash}`,
    headers: { t: token }
   }} 
   alt={i.name}
   onLoad={() => console.log('___DONE___')}/>

但它给了我一个 404 错误。我能做什么？

实际上我从这里得到了那个模式，但它只适用于 React Native 而不是 React。

Answer 1

您可以通过使用 javascript 获取图像然后将其加载src到 image 标签的属性中来加载图像。

componentDidMount() {
    axios.get(`${activeCoverHash}`, { headers: {'t': token }, responseType: 'arraybuffer'}).then((res) => {

      let data = new Uint8Array(res.data);
      let raw = String.fromCharCode.apply(null, data);
      let base64 = btoa(raw);
      let src = "data:image;base64," + base64;

      this.img.src = src;
    });
  }

render() {
    return (
        <img src={""} alt={"Loading..."} ref={(e) => this.img = e} />
    )
}