css文件中包含的Image(jpg)文件未在Django 2.1中加载

时间:2019-01-25 16:36:36

标签: python css django

我在CSS文件中包含了image(jpg)文件。 CSS文件存储在静态文件夹(static / myapp / css)中,图像文件存储在同一静态文件(static / myapp / img)中。

我的项目结构如下:

folder structure

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;
}

我也尝试过这样的背景图片:url(“ svcspg / img / bg1.jpg”); 没有任何作用。

1 个答案:

答案 0 :(得分: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/',
]