包含在 css 文件中的图像（jpg）文件未在 Django 2.1 中加载

Question

我在 CSS 文件中包含了图像（jpg）文件。 CSS文件存储在静态文件夹（static/myapp/css）和图像文件存储在同一个静态文件（static/myapp/img）。

我的项目结构如下：

settings.py

"""
    Django settings for svcomforts_1 project.

    Generated by 'django-admin startproject' using Django 2.1.4.

    For more information on this file, see
    https://docs.djangoproject.com/en/2.1/topics/settings/

    For the full list of settings and their values, see
    https://docs.djangoproject.com/en/2.1/ref/settings/
    """

    import os

    # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


    # Quick-start development settings - unsuitable for production
    # See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/

    # SECURITY WARNING: keep the secret key used in production secret!
    SECRET_KEY = '6-eaqeuu+yem7w01f=ih^!298qnmjr0e!agu=c357au02^j+1('

    # SECURITY WARNING: don't run with debug turned on in production!
    DEBUG = True

    ALLOWED_HOSTS = []


    # Application definition

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'myapp1',
        'myapp2',
    ]

    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 = 'my_website.urls'

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [],
            '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 = 'my_website.wsgi.application'


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

        DATABASES = {
            'default': {
                'ENGINE': 'django.db.backends.sqlite3',
                'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
            }
        }


        # Password validation
        # https://docs.djangoproject.com/en/2.1/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/2.1/topics/i18n/

        LANGUAGE_CODE = 'en-us'

        TIME_ZONE = 'UTC'

        USE_I18N = True

        USE_L10N = True

        USE_TZ = True

        STATIC_URL = '/static/'

     """

style.css 1,312-322 行

{% load static %}

.bannercontainer {
    position: relative;
height: 100vh;
text-align: center;
background-image: url("{% static"/img/bg1.jpg" %}");
color: #fff;
   background-color: rgba(0,0,0,0.4);
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: multiply;
}

我也试过这样 background-image: url("svcspg/img/bg1.jpg"); 没有任何效果。

Answer 1

您应该在模板 css 中尝试这种方式：

background-image: url("{% static "myapp2/img/bg1.jpg" %}");

因为，正如我所见，您在 css 中的第一个示例中省略了“myapp”，并且在第二个示例中省略了 static。

或者如果它仍然没有加载，那么简单地尝试：

background-image: url("/static/myapp2/img/bg1.jpg");

同样在settings.py中你可以定义静态文件目录，一般如下：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
]