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

【问题标题】：Load image from server that requires sending headers从需要发送标头的服务器加载图像
【发布时间】：2018-10-21 12:49:47
【问题描述】：

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

这是我的图片标签

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

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

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

【问题讨论】：

这个例子是反应原生的，在浏览器中，如果你想添加标题，你可能必须使用 javascript 来获取你的图像。
t\我如何在反应中做到这一点？？？？
@a_m_dev 结帐stackoverflow.com/questions/35079576/…
感谢@prakash，但它是 base64 并且需要 XMLHttpRequet ，我想使用 fetch 或 axios 做出反应……

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

能否请您提供一个非异步等待示例，请，请，我需要检查一些事情......谢谢
我收到此错误：未捕获（承诺中）类型错误：无法添加属性 src，对象不可扩展，似乎它的工作，但这里有一个小问题，请帮助，我适合你
ref 解决方案不起作用，但我通过将其保存在 state 中并在 render 中调用它使其工作，在 state 中存储大数据是否好？
这应该不是什么大问题。虽然我想知道为什么 ref 不起作用

【解决方案2】：

使用 IONIC v4 和 React 将是：

import React from 'react';
import API from '../api';

type ImageWithAuthProps = {
    url: string;
}

const ImageWithAuth: React.FC<ImageWithAuthProps> = (props) => {

    // Components refs
    const img: React.Ref<HTMLImageElement> = React.createRef();

    // Load data
    React.useEffect(() => {
        API.get(`${props.url}`,
        {
            responseType: 'arraybuffer',
            headers: {
                'Accept': 'image/jpeg'
            }
        }).then((res) => {

            const blob = new Blob([res.data], {
                type: 'image/jpeg',
            });

            console.log("blob: ", blob);
            var objectURL = URL.createObjectURL(blob);
            if (img.current != null)
                img.current!.src = objectURL;
        });
    }, []);

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

};

export default ImageWithAuth;

【讨论】：

感谢您提供此替代解决方案，但它与 Ionic 无关。它适用于任何 React Web 应用程序。