Javascript ReactJS Axios图像请求

我想向API发出一个请求，请求的标题为UserID:Pass

例如：

const config = {
  headers: {
    'X-RPC-DIRECTORY': 'main',
    'X-RPC-AUTHORIZATION': 'userid:pass'
  }
};

const res = await axios.get(`http://192.00.00.60:8000/obj/e1b8c19e-fe8c-43af-800c-c9400c0e90/abc.jpg`, config );

我如何渲染这个？ 使用相同的方法，我可以在Postman中获得图像，但我希望将其呈现到页面中。

axios({
axios({
        method:'get',
        url,
        auth: {
            username: 'xxxxxxxxxxxxx',
            password: 'xxxxxxxxxxxxx'
        }
    })
    .then((response) => {

        //From here you can pass the response to local variable(state) and store/show image. 

       this.setState({ imageURL : response.data.image }); // change this as per your response 

    })
    .catch((error) => {
        console.log(error);
    });

render(){
return(
  <React.Fragment>
   <img src={this.state.imageURL} alt="image" />
  </React.Fragment>
)
}

方法：'get'，
网址，
认证：{
用户名：“xxxxxxxx”，
密码：“xxxxxxxx”
}
})
。然后（（响应）=>{
//从这里可以将响应传递给局部变量（state）并存储/显示图像。
this.setState（{imageURL:response.data.image}）；//根据您的响应更改此设置
})
.catch（（错误）=>{
console.log（错误）；
});
render（）{
返回(
)
}

确保您有正确的方法类型、URL和响应中的数据

类Hello扩展组件{
class Hello extends Component {
  state = {
    ulr: ''
  }
  componentDidMount() {
      const config = {
      headers: {
      'X-RPC-DIRECTORY': 'main',
      'X-RPC-AUTHORIZATION': 'userid:pass'
      }
    };

  axios.get(`http://192.00.00.60:8000/obj/e1b8c19e-fe8c-43af-800c-c9400c0e90/abc.jpg`, config ).then((response) => {
    this.setState({ url: response.data })
  }).catch((error) => {
    console.log(error)
  })
  }
  render() {
    return (
      <>
        <img src={this.state.url} alt="#" />
      </>
    )
  }
}

export default Hello;

状态={
ulr:'
}
componentDidMount（）{
常量配置={
标题：{
“X-RPC-DIRECTORY”：“main”，
“X-RPC-AUTHORIZATION”：“userid:pass”
}
};
axios.get(`http://192.00.00.60:8000/obj/e1b8c19e-fe8c-43af-800c-c9400c0e90/abc.jpg`，config）。然后（（响应）=>{
this.setState（{url:response.data}）
}).catch（（错误）=>{
console.log（错误）
})
}
render（）{
返回(
)
}
}
导出默认Hello；

这应该回答如何在从API获取图像后呈现图像。 但我认为URL有问题。 我几乎没有问题：

后端API是否托管在我们自己的系统上

API是否公开可用，因为如果不是，我们将无法访问它

您是否设置了其他需要随请求一起发送的头或参数

我试过邮递员也没有得到图像的回应，它给了我错误

---

得到了解决方案，因为响应是content-type:blob，所以我所做的是将blob从FileReader api转换为base64，然后显示它

const fileReaderInstance = new FileReader();
 fileReaderInstance.readAsDataURL(blob); 
 fileReaderInstance.onload = () => {
     base64data = fileReaderInstance.result;                
     console.log(base64data);
 }

---

你想在这里做什么你有api/想访问你的图像url？？？我想呈现这个jpg，但当我直接使用这个链接时，它显示以下内容：{“消息”：“无法创建客户端凭据”，“错误原因”：“缺少凭据”，“错误”：“缺少凭据异常”，“路径”：“/obj/e1b8c19e-fe8c-43af-800c-30c9400c0e90/cutout.jpg”，“动词”：“GET”，“status”：401，“timestamp”：1580278417361}它可能会帮助您：@PrakashKarena确切地说，我有API和图像URL，我只是想从API访问该图像URL，但它需要授权才能访问，问题是我不知道如何访问。是的，后端API托管在本地系统上，要访问它，我们需要头->{'X-RPC-authorization'：'userid:pass'}-但问题是，响应是数据而不是图像url，因此这意味着当我从postman将该数据（响应）保存为.jpg文件时，它就会工作，因此，我的问题是：如何呈现该数据（数据/响应）作为图像。@SRTechConnect因为API不公开，所以我无法访问它。你能在这里通过你得到的响应吗？我有点困惑，你希望在API响应中看到该图像的资源URL还是图像的内容字节？我想你可能正在接收图像的内容字节数据让我看看响应，然后我可以建议这是一个可能的解决方案。@PrasanKumar-请检查添加的屏幕截图response@SRTechConnect问题不在react端。我看到的是，您没有以正确的方式将图像存储在DB中。我建议您根本不要将图像存储在DB中。将它们存储在文件系统中的某个位置，并将其存储在DB的相对路径中。在本例中数据库保持轻量级的方式，您可以在API响应中发送图像的资源URL。并将该资源URL放置在中。根据您在后端使用的堆栈，有许多文章可以帮助您正确执行此操作。我得到的响应不是图像URL，而是其数据，因此，当我将该数据保存为来自postman的s.jpg，那么它就是我想要的图像，我的问题是：我如何将（数据/响应）呈现为图像，因为它不是图像url，而是数据。（我添加了屏幕截图）如果数据是base64，您可以这样尝试。data:image/jpeg；base64，${this.state.image}}/>这就是我得到的：-获取数据：image/jpeg；base64，{props.getImage.firstImage}net:：ERR_INVALID_url为什么要通过props进行渲染？您有来自API的响应，您将该响应存储在一个本地组件的状态中，并通过相同的状态进行渲染。这是因为我使用redux作为状态，props.getImage.firstImage包含：{data、status、statusText、headers、config、request}