如何在React中显示来自Django Rest API的图像？

在React中显示来自Django Rest API的图像可以通过以下步骤实现：

首先，在React项目中安装axios库，用于发送HTTP请求。可以通过以下命令进行安装：

npm install axios

在React组件中，使用axios发送GET请求获取Django Rest API中的图像数据。可以使用componentDidMount生命周期方法来发送请求，示例代码如下：

import React, { Component } from 'react';
import axios from 'axios';

class ImageComponent extends Component {
  state = {
    imageUrl: '',
  };

  componentDidMount() {
    axios.get('https://example.com/api/images/1')  // 替换为Django Rest API的URL
      .then(response => {
        this.setState({ imageUrl: response.data.url });
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { imageUrl } = this.state;

    return (
      <div>
        {imageUrl && <img src={imageUrl} alt="Image" />}
      </div>
    );
  }
}

export default ImageComponent;

在上述代码中，axios.get方法用于发送GET请求，获取Django Rest API中的图像数据。请将https://example.com/api/images/1替换为实际的Django Rest API的URL，确保返回的响应数据包含图像URL。
在React组件的渲染方法中，使用<img>标签来显示图像。只有当图像URL存在时，才会渲染图像。这样可以确保在图像加载之前不会显示空白图像。

这样，当React组件加载时，会发送GET请求获取图像数据，并将图像URL存储在组件的状态中。然后，根据状态中的图像URL，使用<img>标签在页面中显示图像。