Отображение изображений из базы данных в Django

Я новичок в Django, и я делаю простое веб-приложение, которое сохраняет и отображает продукты. Но моя проблема в том, что когда я пытаюсь отобразить информацию о продукте, я могу отобразить все, кроме изображения продукта. Вы можете увидеть мой код ниже.

settings.py в разделе static:

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

Главный urls.py:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('pages.urls')),
    path('products/',include('products.urls')),
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

Модель models.py приложения Products:

from django.db import models
from django.db.models.deletion import CASCADE
from django.db.models.fields import CharField, DateField, DateTimeField
from datetime import datetime

from django.db.models.fields.related import ForeignKey, ManyToManyField

# Create your models here.

class Product(models.Model):
    categories = [
        ('Phone', 'Phone'),
        ('Computer', 'Computer'),
    ]
    name = models.CharField(max_length = 50, default='Nothing', verbose_name='title')
    content = models.TextField(default='Empty', null = True, blank = True, verbose_name='description')
    price = models.DecimalField(max_digits = 5, decimal_places = 2, default=0.0)
    image = models.ImageField(upload_to = 'photos/%y/%m/%d', default='media/photos/default/default_product.png',
                    verbose_name='picture')
    active = models.BooleanField(default = True)
    category = models.CharField(max_length=50, null=True, choices=categories)

    def __str__(self):
        return self.name
    
    class Meta:
        #verbose_name = 'name'
        ordering = ['-name']

И наконец, в файле products.html:

{% block content %}
{% comment "" %}{{pro}}{% endcomment %}
    {% for product in pro %}
        <h1>{{product.name}}</h1>
        <h1>{{product.content}}</h1>
        <h1>{{product.price}}</h1>
        </img src="{{product.image}}" alt="">
        <h1>-----------------------------------</h1>
    {% endfor %}
{% endblock content %}

попробуйте это. Обратите внимание, что для получения изображения необходимо получить доступ к .url

{% block content %}
{% comment "" %}{{pro}}{% endcomment %}
    {% for product in pro %}
        <h1>{{product.name}}</h1>
        <h1>{{product.content}}</h1>
        <h1>{{product.price}}</h1>
        <img src="{{ product.image.url }}" alt=""/>
        <h1>-----------------------------------</h1>
    {% endfor %}
{% endblock content %}

У вас опечатка в теге img

Измените эту строку

</img src="{{product.image}}" alt="">

to

<img src="{{ product.image.url }}" alt=""/>
Вернуться на верх