Django Изображения: Статические и мультимедийные

Существует в основном 2 способа отображения изображений на вашем сайте при использовании Django. Какой же метод следует использовать? Это зависит от требований, и я дам подробное описание того, как и когда использовать каждый метод.

Существует 2 способа отображения изображений на веб-странице:

Статические изображения
Загрузка через медиа

Статические изображения

Если изображение должно быть отображено из определенного набора изображений, следует использовать статический метод.

Структура папок внутри папки проекта должна выглядеть следующим образом.

ª   db.sqlite3
ª   manage.py
ª   tree.txt
ª   
+---demo
ª   ª   asgi.py
ª   ª   settings.py
ª   ª   urls.py
ª   ª   wsgi.py
ª   ª   __init__.py
ª   ª   
ª   +---__pycache__
ª           settings.cpython-310.pyc
ª           urls.cpython-310.pyc
ª           wsgi.cpython-310.pyc
ª           __init__.cpython-310.pyc
ª           
+---env
ª
+---myapp
    ª   admin.py
    ª   apps.py
    ª   models.py
    ª   tests.py
    ª   views.py
    ª   __init__.py
    ª   
    +---migrations
            __init__.py
    ª
    +---templates
    ª       index.html

Вход в полноэкранный режим Выход из полноэкранного режима

Создайте папку в myapp и назовите ее ‘static’.

Структура папок myapp должна выглядеть следующим образом.

+---myapp
    ª   admin.py
    ª   apps.py
    ª   models.py
    ª   tests.py
    ª   views.py
    ª   __init__.py
    ª   
    +---migrations
    ª       __init__.py
    ª
    +---static
    ª
    +---templates
    ª       index.html

Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь в папке static вы можете создать папку ‘images’ и загрузить свои изображения.

В указанном вами html-файле (в данном случае index.html) добавьте в верхней части страницы следующее:

{% load static %}

В теге image файла добавьте путь к изображению, добавив следующее:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Static Image</title>
</head>
<body>
    <img src="{% static 'images/image.jpg' %}" alt="">
</body>
</html>

Войти в полноэкранный режим Выйти из полноэкранного режима

Поскольку static url уже определен в settings.py, тег static ссылается на созданную папку static.

Вы можете отобразить изображение следующим образом:

Загрузка изображения через Media

Когда необходимо сохранить несколько изображений в базе данных или отобразить изображения, специфичные для объекта или пользователя, используется этот метод.

Изображения могут быть загружены в базу данных через:

Отдельную форму на веб-странице, которая принимает файлы изображений
Загрузка изображений через панель администратора

Здесь я буду загружать изображения через панель администратора.

Поскольку для этого метода требуется Pillow (модуль python), выполните команду:

Создайте модель и создайте поле для изображения.

from django.db import models

# Create your models here.
class MyModel(models.Model):
    id = models.AutoField(primary_key=True, auto_created=True)
    name = models.CharField(max_length=50)
    image = models.ImageField(upload_to='images/')

Войдите в полноэкранный режим Выйти из полноэкранного режима

Это автоматически создаст папку ‘media’ и папку ‘images’ в ней после завершения настройки. Перенесите изменения.

В urls.py укажите корень папки на media:

from . import views
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.index, name='index'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Войти в полноэкранный режим Выйти из полноэкранного режима

И наконец, в settings.py вставьте:

import os

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

Ввести полноэкранный режим Выйти из полноэкранного режима

Теперь, когда настройка завершена, вы можете вставить данные.

Чтобы получить доступ к панели администратора, создайте суперпользователя, выполнив команду :

Теперь зарегистрируйте вашу модель в панели администратора, добавив в файл admin.py следующее:

from .models import *

admin.site.register(MyModel)

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь переключитесь на панель администратора и добавьте несколько объектов в модель. Затем отредактируйте представление, чтобы передать набор запросов изображений на веб-страницу.

# Create your views here.
def index(request):
    images = MyModel.objects.filter(name='manasa')
    return render(request, 'index.html', {'images': images})

Вход в полноэкранный режим Выход из полноэкранного режима

И отредактируйте html-страницу для отображения этих изображений.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Media Image</title>
</head>
<body>
    {% for img in images %}
    <img src="{{img.image.url}}" alt="" width="200px" height="150px">
    {% endfor %}
</body>
</html>

Войти в полноэкранный режим Выход из полноэкранного режима

Теперь, когда процедура завершена, запустите сервер. Веб-страница должна выглядеть следующим образом: