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

Posted 2023-02-19

【中文标题】使用json从django后端获取并显示reactjs中的图像

【英文标题】：Fetch and display image in reactjs from django backend using json

【发布时间】：2020-12-12 00:52:51

【问题描述】：

在 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')

这是我的序列化程序类

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

【问题讨论】：

你使用过自定义的 axios 实例吗？如果不是，那么您的get 请求将被定向到localhost:3000/api/products/。

获取请求能够定向到 localhost:3000/api/products/。

并且数据能够从后端显示在前端。请参考问题中按赞给出的图像。我只能显示图像。字符串数据正常工作。

【参考方案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 类中的默认保存方法，并将您的图像在线托管到任何图像托管网站，如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()

现在，在您的序列化程序类中，添加 id 字段以在 react 中正确呈现，并添加一个字段 item_image_url，其中将包含 imgbb 上托管的图像的 URL。

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

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