Ошибка "Страница не найдена" при клике на url изображения, поступающего в get api в Django

У меня есть простой get api, построенный с использованием Django Rest Framework. Он получает все пункты питания из модели, Menu. Он состоит из поля изображения. Ответ api успешный, и я получаю URL изображения в поле изображения, но когда я нажимаю на этот url, изображение не отображается в новой вкладке. Я сделал несколько проектов и, насколько я помню, изображение должно отображаться на новой вкладке. Из-за этого изображение не показывается во фронтенде, который сделан на Reactjs. Бэкенд пока обслуживается на Heroku.

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

https://example.herokuapp.com/api/menus

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

enter image description here

Когда я нажимаю на изображение и image_url, он показывает следующее:

enter image description here

Я добавил image_url, чтобы проверить, работает ли это, но это не сработало так же хорошо.

Моя модель:

class Menus(models.Model):
    category = models.CharField(max_length=50,choices=CATEGORY,default='main courses')
    food_name = models.CharField(max_length=100,blank=True, null=True)
    image = models.ImageField(upload_to='media/pictures',null=True)
    rating = models.FloatField(blank=True, null=True)
    description = RichTextField(blank=True, null=True)
    price = models.FloatField(blank=True, null=True)

Мои сериализаторы:

class MenusSerializer(serializers.ModelSerializer):
    image_url = serializers.SerializerMethodField('get_image_url')    

    def get_image_url(self, obj):
        request = self.context.get('request')
        image_url = obj.image.url
        return request.build_absolute_uri(image_url)



    class Meta:
        model = Menus
        fields = ['category','image', 'image_url','food_name',
                  'description','price','rating']

Мои настройки:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles/')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
django_heroku.settings(locals())

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

Урл моего проекта:

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

Примечание: Не работает как локально, так и на live api (на heroku).

Какие изменения вам нужно сделать:

settings.py

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

models.py

class Menus(models.Model):
    ...
    image = models.ImageField(upload_to='pictures',null=True)
    ...

Установка upload_to будет проверять местоположение после MEDIA_ROOT. Проверьте документацию здесь для хранилища из FileField или ImageField.

Использование поля FileField или поля ImageField (см. ниже) в модели требует нескольких шагов:

1.) В вашем файле настроек вам нужно определить MEDIA_ROOT как полный путь к директории, в которой вы хотите, чтобы Django хранил загруженные файлы. (Для повышения производительности эти файлы не хранятся в базе данных.) Определите MEDIA_URL как базовый публичный URL этого каталога. Убедитесь, что этот каталог доступен для записи учетной записи пользователя веб-сервера.

.

2.) Добавьте поле FileField или ImageField к вашей модели, определив параметр upload_to для указания подкаталога MEDIA_ROOT, который будет использоваться для загруженных файлов.

.

3.) Все, что будет сохранено в вашей базе данных, это путь к файлу (относительно к MEDIA_ROOT). Скорее всего, вы захотите использовать удобный атрибут url атрибут, предоставляемый Django. Например, если ваше поле ImageField называется mug_shot, вы можете получить абсолютный путь к изображению в шаблоне шаблона с {{ object.mug_shot.url }}.

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