Я интегрирую электронную коммерцию django в среду отдыха.На странице продуктов я могу просмотреть название продукта, описание, кнопку «Добавить в корзину» и «Слаг», но изображение не будет отображаться.В файле терминала или console.log ошибок нет.Когда я захожу в console.log, я вижу URL-адрес изображения, далее, когда я захожу в свою папку MEDIA, я вижу, что изображение продукта было загружено, но оно не отображается.
Я включил файлы, в которых, по моему мнению, проблема возникает ниже.
В этой строке предполагается отображать изображение
<Item.Image src={item.image} />
ProductList.js:
import React from 'react'
import axios from 'axios'
import { Button, Container, Dimmer, Icon, Image, Item, Label, Loader, Message, Segment } from 'semantic-ui-react'
import {productListURL} from "../constants";
class ProductList extends React.Component {
state = {
loading: false,
error: null,
data: []
}
componentDidMount() {
this.setState({loading: true});
axios
.get(productListURL)
.then(res => {
console.log(res.data);
this.setState({data: res.data, loading: false});
})
.catch(err =>{
this.setState({error: err, loading: false});
});
}
render() {
const {data, error, loading} = this.state;
return (
<Container>
{error && (
<Message
error
header='There was some errors with your submission'
content={JSON.stringify(error)}
/>
)}
{loading && (
<Segment>
<Dimmer active inverted>
<Loader inverted>Loading</Loader>
</Dimmer>
<Image src='/images/wireframe/short-paragraph.png' />
</Segment>
)}
<Item.Group divided>
{data.map(item => {
return <Item key={item.id}>
<Item.Image src={item.image} />
<Item.Content>
<Item.Header as='a'>{item.title}</Item.Header>
<Item.Meta>
<span className='cinema'>{item.category}</span>
</Item.Meta>
<Item.Description>{item.description}</Item.Description>
<Item.Extra>
<Button primary floated='right' icon labelPosition="right">
Add to cart
<Icon name='cart plus'/>
</Button>
{item.discount_price && <Label color={item.label === "primary" ? "blue" : item.label === "secondary" ? "green" : "olive"}>{item.label}</Label>}
</Item.Extra>
</Item.Content>
</Item>
})}
</Item.Group>
</Container>
);
}
}
export default ProductList
views.py:
from rest_framework.generics import ListAPIView
from rest_framework.permissions import AllowAny
from core.models import Item
from .serializers import ItemSerializer
class ItemListView(ListAPIView):
permission_classes = (AllowAny,)
serializer_class = ItemSerializer
queryset = Item.objects.all()
serializers.py:
from rest_framework import serializers
from core.models import Item
class ItemSerializer(serializers.ModelSerializer):
category = serializers.SerializerMethodField()
label = serializers.SerializerMethodField()
class Meta:
model = Item
fields = (
'id',
'title',
'price',
'discount_price',
'category',
'label',
'slug',
'description',
'image'
)
def get_category(self, obj):
return obj.get_category_display()
def get_label(self, obj):
return obj.get_label_display()
models.py:
from django.db.models.signals import post_save
from django.conf import settings
from django.db import models
from django.db.models import Sum
from django.shortcuts import reverse
from django_countries.fields import CountryField
class Item(models.Model):
title = models.CharField(max_length=100)
price = models.FloatField()
discount_price = models.FloatField(blank=True, null=True)
category = models.CharField(choices=CATEGORY_CHOICES, max_length=2)
label = models.CharField(choices=LABEL_CHOICES, max_length=1)
slug = models.SlugField()
description = models.TextField()
image = models.ImageField()
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse("core:product", kwargs={
'slug': self.slug
})
def get_add_to_cart_url(self):
return reverse("core:add-to-cart", kwargs={
'slug': self.slug
})
def get_remove_from_cart_url(self):
return reverse("core:remove-from-cart", kwargs={
'slug': self.slug
})