使用 json 从 django 后端获取并在 reactjs 中显示图像

Question

在 model.py 文件的 imageField 中默认使用一张图片。

from django.db import models
class Product(models.Model):
  item_title= models.CharField(max_length=50)
  item_desc=models.TextField()
  item_price=models.IntegerField()
  item_image=models.ImageField(upload_to='post_images',default='default.png')

这是我的序列化器class

from rest_framework import serializers
from .models import Product
class ProductSerializer(serializers.ModelSerializer):
  class Meta:
    model = Product
    fields= ('item_title', 'item_desc', 'item_price', 'item_image')

而views.py是-

class ProductView(viewsets.ModelViewSet):
  serializer_class = ProductSerializer
  queryset = Product.objects.all()

在localhost:8000收到的json数据是 localhost:8000/api/products

App.js 在前端获取数据（react js）。这是代码

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productList: [],
    };
  }

  refreshList = () => {
    axios
     .get("/api/protducts/")
     .then((res) => this.setState({ productList: res.data }))
     .catch((err) => console.log(err));
  };
  componentWillMount() {
    this.refreshList();
  }

  render() {
    return (
      <div>
        {this.state.productList.map((item) => (
          <Product key={item.id} item={item} />
        ))}
      </div>
    );
  }
 }
 export default App;

而前端的 Product 组件是

class Product extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  return (
    <div class="jumbotron col-sm-2">
      <img src={this.props.item.item_image}></img>
      <mark>{this.props.item.item_title}</mark>
      <div class="lead">{this.props.item.item_desc}</div>
      <div class="text-primary">{this.props.item.item_price}</div>
    </div>
  );}}
  export default Product;

前面显示的数据没有显示任何图像。 localhost:3000

Answer 1

您无法使用 JSON 传递图像。您需要将其转换为 base64 或任何编码。让我向您解释一个简单的方法：

在您的模型中创建一个名为 item_image_url 的字段。

class Product(models.Model):
  item_title= models.CharField(max_length=50)
  item_desc=models.TextField()
  item_price=models.IntegerField()
  item_image=models.ImageField(upload_to='post_images',default='default.png')
  item_image_url = models.TextField()

覆盖 Product class 中的默认保存方法，并将您的图像在线托管到任何图像托管网站，如 imgbb 或 aws。下面给出了示例代码。

def save(self):
        encodedString = base64.b64encode(self.item_image.file.read())
        data = {"key": os.environ.get("IMG_BB"), "image": encodedString.decode("utf-8")}
        uploadedImageInfo = requests.post("https://api.imgbb.com/1/upload", data=data)
        jsonResponse = json.loads(uploadedImageInfo.text)
        self.item_image_url = jsonResponse["data"]["display_url"]
        super().save()

现在，在您的序列化器 class 中，添加 id 字段以在 React 中正确渲染，并添加一个字段 item_image_url ，它将包含托管图像的 URL在 imgbb 上。

class ProductSerializer(serializers.ModelSerializer):
  class Meta:
    model = Product
    fields= ('id', 'item_title', 'item_desc', 'item_price', 'item_image_url')

希望这对您有所帮助。如果您需要进一步说明，请告诉我。

使用 json 从 django 后端获取并在 reactjs 中显示图像

Fetch and display image in reactjs from django backend using json

django

json

django-rest-framework

reactjs

react-fullstack