Не отображаются изображения в шаблоне

@dj_ymep · Регистрация: 21.12.2015

Студворк — интернет-сервис помощи студентам

Добрый день, помогите, пожалуйста, разобраться. Есть проект на django, все файлы стилей и скрипты грузятся, а вот изображения нет. Хотя если перейти по сслыке изображения напрямую (http://127.0.0.1:8000/static/img/logo-login.svg), то оно скачивается, но не отображается.

Вот мои файлы:

Гланый urls.py

Python
1
2
3
4
urlpatterns = [
    path('admin/', admin.site.urls),
    ......
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Дополнительный urls.py

Python
1
2
3
4
5
6
7
8
urlpatterns = [
    path('', index),
    path('cabinet/', cabinet),
    path('users/', include('django.contrib.auth.urls')),
]
 
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Файл settings.py:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'static'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "TableManager/static")
]
 
# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
LOGIN_REDIRECT_URL = '/cabinet/'
 
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

В чем может быть проблема? Заранее спасибо!

@kazak · 27.03.2023, 15:13

Сообщение от dj_ymep

то оно скачивается, но не отображается.

Что сие значит?

@dj_ymep · 27.03.2023, 15:37 **[ТС]**

Показывает вместо картинки только название.
Название: logo.png
Просмотров: 47

Размер: 1.3 Кб

А если нажать на изображение правой кнопкой и "Открыть изображение на новой вкладке", то оно просто скачивается и все.
Так же изображение скачивается если перейти по прямой ссылке картинки, например http://127.0.0.1:8000/static/img/logo-login.svg.

Получается ее видно, но в шаблонах не отображает ничего.

@kazak · 27.03.2023, 16:38

В шаблоне как картинка прописана?

@dj_ymep · 27.03.2023, 16:41 **[ТС]**

Пробовал и так:

Python
1
<img src="{% static '/img/logo-login.svg' %}" alt="logo" class="login-page__logo">

и так:

Python
1
<img src="/static/img/logo-login.svg" alt="logo" class="login-page__logo">

@kazak · 27.03.2023, 17:22

Сообщение от dj_ymep

Во-первых, на всякий случай,это расширение, чтобы такая конструкция работала, нужно в шаблон добавить

Code
1
{% load static %}

Во-вторых, путь должен быть относительным, т.е. без слеша впереди.

HTML5
1
<img src="{% static 'img/logo-login.svg' %}" alt="logo" class="login-page__logo">

В-третьих, так или иначе запрос картинки должен упасть в логи, там можно посмотреть, какой именно урл формируется и с каким ответом запрос завершается.

@dj_ymep · 28.03.2023, 14:13 **[ТС]**

Добрый день, благодарю за Ваши советы. Методом проб и ошибок выявил, что не загружается только SVG формат, png, например, отображается.

1. {% load static %} прописан.
2. Cлэш убрал - результат тот же.
3. Jтвет от сервера на svg: "GET /static/img/logo-login.svg HTTP/1.1" 200 7480

Вроде все нормально.

@kazak · 28.03.2023, 15:16

Сообщение от dj_ymep

3. Jтвет от сервера на svg: "GET /static/img/logo-login.svg HTTP/1.1" 200 7480

Значит файл скачивается.

Сообщение от dj_ymep

Методом проб и ошибок выявил, что не загружается только SVG формат, png, например, отображается.

Если верить ынтырнетам svg несколько отличается от других каритнок. Тут либо менять формат изображения, либо попробовать другие варианты добавления svg
https://svg-art.ru/?page_id=1047

@dj_ymep · 28.03.2023, 15:27 **[ТС]**

Спасибо! Буду пробовать этими способами.

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@dj_ymep 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 28
	27.03.2023, 15:37 [ТС]
	Показывает вместо картинки только название. А если нажать на изображение правой кнопкой и "Открыть изображение на новой вкладке", то оно просто скачивается и все. Так же изображение скачивается если перейти по прямой ссылке картинки, например http://127.0.0.1:8000/static/img/logo-login.svg. Получается ее видно, но в шаблонах не отображает ничего. 0

@kazak 3601 / 2742 / 355 Регистрация: 11.03.2009 Сообщений: 6,300
	27.03.2023, 16:38
	В шаблоне как картинка прописана? 0

@dj_ymep 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 28
	28.03.2023, 14:13 [ТС]
	Добрый день, благодарю за Ваши советы. Методом проб и ошибок выявил, что не загружается только SVG формат, png, например, отображается. 1. {% load static %} прописан. 2. Cлэш убрал - результат тот же. 3. Jтвет от сервера на svg: "GET /static/img/logo-login.svg HTTP/1.1" 200 7480 Вроде все нормально. 0

@dj_ymep 0 / 0 / 0 Регистрация: 21.12.2015 Сообщений: 28
	28.03.2023, 15:27 [ТС]
	Спасибо! Буду пробовать этими способами. 0

Не отображаются изображения в шаблоне

Решение