Как правильно указать на статическое изображение в Django

Question

У меня есть шаблон, который отображает изображение:

{% load staticfiles %}

<img src="{% static "img/logo.png" %}" alt="My image"/>

Ссылка на изображение не работает, но она указывает на:

localhost/static/img/logo.png

Какие значения мне нужно установить для static_root, static_url и STATICFILES_DIRS, чтобы это изображение отображалось правильно?

Это моя структура каталогов:

myprojectname (верхний уровень)

--- myprojectname

--- --- myproectname

--- --- --- настройки

--- --- --- --- base.py (setting.py)

--- --- статический

--- --- --- img

Это моя статическая конфигурация в настройках:

STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    #normpath(join(SITE_ROOT, 'static')),
    os.path.join(BASE_DIR, "static"),
    '/Users/myuser/myprojectname/myprojectname/static',
)

Вот что это показывает:

Я уже сделал коллекционирование, и это не работает.

Answer 1

Статические файлы могут сбивать с толку в Django. Я постараюсь объяснить как можно проще...

STATIC_ROOT Это каталог, из которого вы должны обслуживать статические файлы.

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

STATIC_ROOT и STATICFILES_DIRS не могут указывать на один и тот же каталог.

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

когда DEBUG = True и вы включили django.core.staticfiles в вашем INSTALLED_APPS, Django будет обслуживать файлы, расположенные в STATICFILES_DIRS кортеж с помощью STATIC_URL путь как отправная точка.

В производстве эта ответственность должна быть возложена на Nginx, Apache, CloudFront и т. Д. Когда DEBUG = False Django не будет автоматически обслуживать статические файлы.

Когда вы бежите:

$ python manage.py collectstatic

Файлы, указанные в STATICFILES_DIRS, копируются в STATIC_ROOT для развертывания.

Итак, чтобы ответить на ваш вопрос, я бы сделал следующее:

Создайте другой каталог для хранения ваших статических файлов в разработке и добавьте этот путь к вашему STATICFILES_DIRS. Я обычно называю эту папку "static-assets". Он может находиться на том же уровне, что и существующий "статический" каталог.

Установите в STATIC_ROOT путь к существующему "статическому" каталогу.

Если вы внимательно посмотрите на путь, который возвращает 404 на вашем скриншоте, путь к изображению указывается как: /static/img/logo.png, но ваш каталог для изображений: /static/image/

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

Answer 2

Сделайте папку "staticfiles" в корне вашего проекта, где существует settings.py

В статических файлах вы можете пойти по этому пути..

• CSS
• JS
• изображений

В settings.py

STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
                os.path.join(PROJECT_DIR,'staticfiles'), # if your static files folder is named "staticfiles"
)
TEMPLATE_DIRS = (
                os.path.join(PROJECT_DIR,'template'), # if your static files folder is named "template"
)

В base.html

<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}" /> 

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>

В других файлах шаблонов, в которые вы включаете base.html

{% extends "base.html" %}
{% load static %}


<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>


<div id="yourID" class="yourClass">
    <img src="{% static "images/something.gif" %}" alt="something" >
</div>

Answer 3

Если вы находитесь в режиме разработки, определите только одну строку:

STATICFILES_DIRS = ( os.path.join('static'), )

Вам не нужно определять STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'

ИЛИ

STATICFILES_DIRS как BASE_DIR

Итак, рабочее решение:

STATIC_URL = '/static/'

STATICFILES_DIRS = ( os.path.join('static'), )

Answer 4

Если вы хотите сохранить статические файлы в Django, вам нужно будет сделать следующее.

вsettings.pyфайл у вас будет что-то вроде этого `

      STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'my_project/static')  # where I want to host the static files i.e img, js & css
]

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

      from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
    path('', include('appfront.urls')),
    path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Заключите свойtemplateбудет иметь что-то вроде этого Обратите внимание на использованиеstaticярлык

      {% load static %}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
    <div class="container">
      <a class="navbar-brand" href="{% url 'index' %}">
        <img src="{% static 'img/logo.png' %}" class="logo" alt="">
      </a>
'''

Answer 5

на самом деле я тоже боролся с той же проблемой, теперь она решена, проверьте документацию javapoint, когда она действительно хороша, другой метод, который сработал для меня, - это изменить путь к статической папке, то есть поместить статическую папку в папку приложения, которую вы создали ( в моем случае статическая папка находится внутри папки first_app). он должен работать . после этого я переместил свои папки туда, где они были, и, к моему удивлению, все снова заработало !. иногда это может быть ошибка браузера. Я старался изо всех сил объяснить свой уровень, так как я новичок в Django.