Изображение не отображается в Django реагируют - PullRequest
0 голосов
/ 28 сентября 2019

Я интегрирую электронную коммерцию django в среду отдыха.На странице продуктов я могу просмотреть название продукта, описание, кнопку «Добавить в корзину» и «Слаг», но изображение не будет отображаться.В файле терминала или console.log ошибок нет.Когда я захожу в console.log, я вижу URL-адрес изображения, далее, когда я захожу в свою папку MEDIA, я вижу, что изображение продукта было загружено, но оно не отображается.

enter image description here enter image description here Я включил файлы, в которых, по моему мнению, проблема возникает ниже.

В этой строке предполагается отображать изображение

                <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
        })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...