Вывод изображений в шаблон на Django

Для начала, давайте настроим папку media для сохранения наших изображений.

Перейдем в settings.py, найдем строчку

backend/settings.py

STATIC_URL = 'static/'

И сделаем так:

STATIC_URL = '/static/'
STATIC_ROOT = (BASE_DIR / 'static')

MEDIA_ROOT = (BASE_DIR / 'media')
MEDIA_URL = '/media/'

Отлично. Поясняю, все изображения будут добавляться в папку media, а там, как мы уже рассортируем в самой модели.

Но, теперь нужно добавить кое-что в главный urls.py, чтобы изображения отображались правильно

backend/urls.py

from django.conf.urls.static import static
from backend import settings

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

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

Поясняю:

• Изображения в дебаг режиме будут подгружаться сервером django.
• На деплое это делает nginx.

Чтож, дорогие друзья, давайте добавим в нашу модель новый метод, назвав его get_thumbnail и вспомним, куда мы сохраняем изображения.

blog/models/articles.py

class Article(models.Model):
    thumbnail = models.ImageField(
        verbose_name='Превью поста',
        blank=True,
        upload_to='images/thumbnails/',
        validators=[FileExtensionValidator(
            allowed_extensions=('png', 'jpg', 'webp', 'jpeg', 'gif'))
        ]
    )
    #some fields
    
    #some methods
    
    def __str__(self):
    """
    Возвращение строки в виде заголовка статьи
    """
        return self.title
    
    @property
    def get_thumbnail(self):
        """
        Получение заглушки при отсутсвии изображения
        """
        if not self.thumbnail:
            return '/media/images/placeholder.png'
        return self.thumbnail.url

Пояснения:

• Полный путь сохранения будет /media/images/thumbnails/
• Также, я добавил в папку /media/images/ простую заглушку.

Теперь давайте добавим в шаблон наш метод:

templates/modules/blog/articles/article-list.html

{% extends 'main.html' %}

{% block content %}
    {% for article in articles %}
        <figure>
            <img src="{{ article.get_thumbnail }}" width="200" alt="{{ article.title }}">
        </figure>
        <strong>{{ article.title }}</strong>
        <p>{{ article.short_description }}</p>
    {% endfor %}
{% endblock %}

Пояснения:

• Я добавил вот этот фрагмент <figure><img src="{{ article.get_thumbnail }}" alt="{{ article.title }}"></figure>

Вот что из этого вышло:

А так хранятся сейчас изображения:

В следующем уроке мы создадим ещё один модуль, назовем его system или core, и добавим туда функцию переименования нашего изображения, а также сохранение изображений по датам.

Но, на самом деле, вы можете поступить иначе, но в этом тоже есть некоторые свои минусы.

На самом деле, placeholder можно было установить как параметр default в нашем ImageField, а сохранение по датам, просто к пути upload_to='images/thumbnails/%Y/%m/%d/'. 

Но, мне лично нужна возможность переименовать изображение.