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

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

这是我的图像标签

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

console.log（“”\uuuuuuuuuuuuuuuuuuuuuuuuuuuuu'）}>

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

---

实际上，我从中获得了该模式，但它仅适用于React Native not React。

您可以通过使用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} />
    )
}

componentDidMount（）{
get（${activeCoverHash}，{headers:{'t'：token}，responseType:'arraybuffer'}）。然后（（res）=>{
let data=新的Uint8Array（res.data）；
让raw=String.fromCharCode.apply（null，数据）；
设base64=btoa（原始）；
让src=“data:image；base64，”+base64；
this.img.src=src；
});
}
render（）{
返回(
this.img=e}/>
)
}

使用离子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;

从“React”导入React；
从“../API”导入API；
键入ImageWithAuthProps={
url:string；
}
const ImageWithAuth:React.FC=（道具）=>{
//组件参考
常量img:React.Ref=React.createRef（）；
//加载数据
React.useffect（（）=>{
API.get（`${props.url}`，
{
响应类型：'arraybuffer'，
标题：{
“接受”：“图像/jpeg”
}
})。然后（（res）=>{
const blob=新blob（[res.data]{
键入：“图像/jpeg”，
});
log（“blob:，blob”）；
var objectURL=URL.createObjectURL（blob）；
如果（img.current！=null）
img.current！.src=objectURL；
});
}, []);
返回(
);
};
使用auth导出默认图像；

该示例适用于react native，在浏览器中，如果要添加标题，您可能必须使用javascript获取图像。t\n在react？？？@a_m_dev Checkout中如何执行此操作谢谢@prakash，但它是base64，需要XMLHttpRequest，我想在react中使用fetch或axios做一些事情…你能不能提供一个非异步等待示例，请，请，我需要检查一些东西。。。谢谢我收到了这个错误：Uncaught（in promise）TypeError:无法添加属性src，对象不可扩展，它似乎在工作，但这里有一个小问题，请帮助我，我告诉你ref解决方案不起作用，但我通过将其保存在状态并在render中调用使其工作，在状态中存储大数据好吗？？？这应该不是什么大问题。虽然我想知道为什么ref没有为提供这种替代解决方案而努力工作，但它与离子液体没有任何关系。它将适用于任何React web应用程序。