Перебор базы данных для отображения изображений в шаблоне Django

Я новичок в Django, я читал документацию и вопросы других здесь на Stackoverflow, но я не смог решить эту ошибку самостоятельно. Пока это только для разработки.

Когда я пытаюсь выполнить цикл и извлечь изображения из базы данных для отображения в моем шаблоне, я получаю ошибку: "GET /images/tokyo.jpg HTTP/1.1 404 Not Found: /images/tokyo.jpg" Однако я сохранил изображения в базе данных, и они находятся в media/images.

Я создаю приложение, которое отображает пункты назначения из списка путешествий. Другие поля из моей базы данных, такие как город, страна и время полета, отображаются как положено, у меня проблемы только с изображением. Что я делаю не так? Я включил весь свой код, чтобы быть доскональным. Заранее спасибо!

Мой settings.py

STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_DIRS = [BASE_DIR / "static"]
STATICFILES_STORAGE = "django.contrib.staticfiles.storage.StaticFilesStorage"

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Мой urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('travel.urls')),
]

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

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

Мой models.py

ADVENTURE_CHOICES = (
    ('beach', 'Beach'),
    ('diving', 'Diving'),
    ('city', 'City'),
    ('hiking', 'Hiking'),
)

CLIMATE_CHOICES = (
    ('tropical', 'Tropical'),
    ('cold', 'Cold'),
    ('temperate', 'Temperate'),
)

FLIGHT_CHOICES = (
    ('short', 'Short'),
    ('long', 'Long'),
)

class Destination(models.Model):
    city = models.CharField('City', max_length=50)
    country = models.CharField('Country', max_length=50)
    adventure = models.CharField('Adventure', max_length=20, choices = ADVENTURE_CHOICES)
    climate = models.CharField('Climate', max_length=50, choices = CLIMATE_CHOICES)
    flight = models.CharField('Flight Length', max_length=50, choices = FLIGHT_CHOICES)
    image = models.ImageField(null=True, blank=True, upload_to="images/")

    def __str__(self):
        return self.city

Мой forms.py

class DestinationForm(ModelForm):
    class Meta:
        model = Destination
        fields = ('city', 'country', 'adventure', 'climate', 'flight', 'image')
        labels = {
            'city': 'City',
            'country': 'Country',
            'adventure': 'Type of Adventure',
            'climate': 'Climate',
            'flight': 'Flight Time',
            'image': 'Image',
        }
        widget = {
            'City': forms.TextInput(attrs={'class':'form-control', 'placeholder':'City'}),
            'Country': forms.TextInput(attrs={'class':'form-control', 'placeholder':'Country'}),
            'Adventure': forms.TextInput(attrs={'class':'form-select', 'placeholder':'Adventure'}),
            'Climate': forms.TextInput(attrs={'class':'form-select', 'placeholder':'Climate'}),
            'Flight': forms.TextInput(attrs={'class':'form-select', 'placeholder':'Flight'}),
        }

Мой шаблон

{% extends 'travel/base.html' %}
{% load static %}

{% block content %}
    <br/>
    <br/>
<div class="container">
    <div class="row">
        {% for destination in destination_list %}
        <div class="col city">
            <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="{{ destination.image }}" alt="Card image" style="height: 15rem;">
            <div class="card-body">
                <h5 class="card-title">{{ destination }}, {{ destination.country }}</h5>
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="card-text"><i class="bi bi-brightness-high"></i> {{ destination.adventure }}</div>
                        </div>
                        <div class="col">
                            <div class="card-text"><i class="bi bi-airplane-engines"></i> {{ destination.flight }}</div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}  

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