Django：在模板中导入静态文件无法正常工作答案

【问题标题】：Django : Import static file inside a template doesn't work properlyDjango：在模板中导入静态文件无法正常工作
【发布时间】：2020-10-27 16:10:06
【问题描述】：

似乎我的静态文件在我的 django 项目中无法正常工作。我不确定这是否与 js 文件或整个静态文件完全相关。检查相关问题，我找不到如何解决这个问题。因此，我在下面的屏幕截图中发送了我的模板的外观以及它在浏览器中的外观：

我的模板应该是什么样子：（向下滚动时，背景图像也会移动）

但这就是我的浏览器显示模板的方式：（没有背景图像，没有填充调整）

这是我的 base.html 代码：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'css/all.css' %}">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <!-- Custom -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- LightBox -->
    <link rel="stylesheet" href="{% static 'css/lightbox.min.css' %}">

    <title>BT Real Estate</title>
</head>
<body>
    <!-- Top Bar -->
    {% include 'partials/_topbar.html' %}
    <!-- Navbar -->
    {% include 'partials/_navbar.html' %}
    <!--- Main Content -->

    {% block content %} {% endblock %}
    <!-- Footer -->
    {% include 'partials/_footer.html' %}

    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.bundle.min.js' %} "></script>
    <script src="{% static 'js/lightbox.min.js' %} "></script>
    <script src="{% static 'js/main.js' %} "></script>
</body>
</html>

另外，这也是我在 settings.py 中处理静态文件的方式：

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'listings.apps.ListingsConfig',
    'realtors.apps.RealtorsConfig',
    'pages.apps.PagesConfig',
    'django.contrib.auth',
    'django.contrib.humanize',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'btre.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'btre.wsgi.application'

# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': '******',
        'USER': '******',
        'PASSWORD': '******',
        'HOST': 'localhost',
    }
}

# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'btre/static')
]

# Media Folder Settings
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('', include('pages.urls')),
    path('listings/', include('listings.urls')),
    path('admin/', admin.site.urls),
] + static (settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

这是我在 index.html 中扩展 base.html 的方法：（我只是在这里带来了展示案例的代码）

{% extends 'base.html' %}
{% load humanize %}
{% block content %}
    <!-- Showcase -->
    <section id="showcase">
        <div class="container text-center">
        <div class="home-search p-5">
            <div class="overlay p-5">
            <h1 class="display-4 mb-4">
                Property Searching Just Got So Easy
            </h1>
            <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit.Recusandae quad, 
asperiores eveniet vel nostrum magnam
                voluptatum tempore! Consectetur, id commodi!</p>
            <div class="search">
                <form action="search.html">
                <!-- Form Row 1 -->
                    #pass
{% endblock %}

最后，这是我的静态文件的层次结构：

为什么会出现这样的问题？有人可以帮我解决这个问题吗？

谢谢。

【问题讨论】：

你有哪个版本的Django？

标签： python django django-staticfiles static-files

【解决方案1】：

我认为您必须在设置中包含媒体根目录和媒体网址。我使用以下设置。

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATICFILES_DIRS = [os.path.join(BASE_DIR),'static']
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')

然后在您的 URLS 中，确保您具有以下设置：（先导入静态和设置），然后在最后输入以下代码！

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

如果未显示的图像在您的本地计算机上，我认为这可能会解决问题。

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【解决方案2】：

只需删除“/cover”并从“main_app/static/css/style.css/showcase”中放入“fixed”而不是“fixed/cover”

【讨论】：