Проблема с передачей изображений из Django REST Framework в React

Я пытаюсь отобразить изображение для категории товаров в React.

Добавил следующие строки в настройки:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Затем установите URL-адреса для обслуживания медиафайлов во время разработки:

router = routers.SimpleRouter()

# some routes here

urlpatterns = [
    path('', include(router.urls)),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Модель категории выглядит следующим образом:

class Category(models.Model):
    title = models.CharField(max_length=100, null=False)
    slug = models.SlugField(max_length=100, unique=True)
    poster = models.ImageField(upload_to="categories/")

Сериализатор для него:

class CategorySerializer(ModelSerializer):
    class Meta:
        model = Category
        fields = '__all__'

На главной странице в React я отображаю список CategoryCards:

import React, {useEffect} from "react";
import * as API from "../apis/API";
import CategoryCard from "./CategoryCard";
import Loader from "./Loader/Loader";

export default function Home() {
    const [categories, setCategories] = React.useState([]);
    const [loading, setLoading] = React.useState(true);

    useEffect(() => {
        API.list('categories')
            .then(p => setCategories(p))
            .then(_ => setLoading(false));
    }, []);

    return (
        <div>
            <label>Popular categories</label>
            {loading && <Loader/>}
            {categories.length ? (
                <div>
                    {categories.map(c => <CategoryCard key={c.id} product={c}/>)}
                </div>
            ) : (
                loading ? null : <p>No categories</p>
            )}
        </div>
    );
}

И компонент React для отображения заголовка категории и изображения:

import React from 'react';
import {A} from 'hookrouter';

export default function CategoryCard({product}) {
    return (
        <div>
            <A href={`/catalog/${product.slug}/list`}>
                {product.title}
            </A>
            <img src={product.poster} alt={`${product.title} poster`}/>
        </div>
    );
}

Однако, я не получаю изображения на странице.

Я добавил одну категорию через админ-панель Django, файл был успешно помещен в нужную папку (/media/categories/...).

product.poster выглядит так: http://localhost:8000/media/categories/processor-logo.png.

Когда я пытаюсь перейти по этому адресу через адресную строку браузера или через панель администратора, я получаю ошибку 404. В чем проблема?

Вернуться на верх