ReactJS Axios 图片请求

Question

我想向 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 中获取图像，但我想将其渲染到页面中。

Answer 1

1- 创建 useState 以保存您的 base64 数据。

const [base64, setBase64] = useState();

2- 创建 useEffect 或 function 将图像从 get 请求转换为 base64。

useEffect(() => {
    axios
      .get(
        url,
        {
          responseType: "arraybuffer",
        }
      )
      .then((response) =>
        setBase64(Buffer.from(response.data, "binary").toString("base64"))
      );
  }, []);

3-根据data URI scheme的语法将base64数据显示为图像：

<img src={data:[<media type>][;charset=<character set>][;base64],<data>} />

示例：

<img src={`data:image/jpeg;charset=utf-8;base64,${base64}`} />

Answer 2

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

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

Answer 3

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

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

Answer 4

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;

这应该回答如何在从 API 获取图像后渲染图像。 但我认为 URL 有问题。 我有几个问题：

1. 后端 API 是否托管在我们自己的系统上？
2. API 是否公开可用，否则我们无法访问它。
3. 您是否设置了其他需要随请求发送的标头或参数。
4. 我尝试使用邮递员也没有得到图像响应，它给了我错误。