HTML无法在Django中投放图片

Question

I'm building a simple Django website but the image in my html file doesn't load, it is the same for any image inserted in the html page or the background image. 我正在构建一个简单的Django网站，但html文件中的图像无法加载，插入html页面或背景图像的任何图像均相同。

My settings.py file is as follows: 我的settings.py文件如下：

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))


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


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

TEMPLATE_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',
    'myapp',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)    

ROOT_URLCONF = 'Site.urls'

WSGI_APPLICATION = 'Site.wsgi.application'


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

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'SiteDatabase',
        'USER': 'siteadmin',
        'PASSWORD': 'siteadmin',
    }
}

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

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC+05:30'

USE_I18N = True

USE_L10N = True

USE_TZ = True


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

STATIC_URL = '/static/'

#TEMPLATES

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(BASE_DIR), "static", "templates"),
)

if DEBUG:
    MEDIA_URL = '/media/'
    STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "static-files")
    MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "media")
    STATICFILES_DIRS = (
    os.path.join(os.path.dirname(BASE_DIR), "static", "static"),
    )

I've also updated my urls.py file as: 我也将urls.py文件更新为：

from django.conf.urls import patterns, include, url
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = patterns('',
    # Examples:
    url(r'^$', 'qaengine.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),
    url(r'^captcha/', include('captcha.urls')),
    url(r'^admin/', include(admin.site.urls)),
)

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

The following is my static directory: 以下是我的静态目录：

/static/

/static/images/home-background.jpeg

/static/media/

/static/static/home.css

/static/static-files/    (This is where all files from collectstatic are stored)

/static/templates/home.html

And the following are my html and css files: 以下是我的html和css文件：

HTML: HTML：

    <html>
        <head>
            <link type="text/css" rel="stylesheet" href = "../static/home.css" />
        </head>

        <body>
            <img src="../images/home-background.jpeg"/>
            <form method='POST' action=''>
                {% csrf_token %}
                {{ form.as_p }}

                <input type='submit'>
            </form>
        </body>
    </html>

CSS: CSS：

body {
    background-image: url("../images/home-background.jpeg");
}

But the images doesn't load and I have no clue what's the problem in rendering it! 但是图像无法加载，我不知道渲染它有什么问题！ Please help! 请帮忙！

PS If I pull images from the internet that works perfectly PS：如果我从互联网上获取效果最佳的图像

Answer 1

1) Have you tryed linking static resources this way? 1）您是否尝试过以这种方式链接静态资源？

<img src="{% static 'images/home-background.jpeg' %}" />

Django should replace static with your STATIC_URL, and the URL should became /static/images/home-background.jpg Django应该用您的STATIC_URL替换static ，并且URL应该变成/static/images/home-background.jpg

2) You also need to add this at the beginning of you html file if you want to use {% static ... %} 2）如果您想使用{% static ... %} ，则还需要在html文件的开头添加此代码

{% load staticfiles %}

3) When you use {% static 'images/file.jpg' %} you say that you want to replace static with the value of STATIC_ROOT . 3）当使用{% static 'images/file.jpg' %}您说要用STATIC_ROOT的值替换static。 In your settings.py you set STATIC_ROOT to /static/static-files . 在您的settings.py中，将STATIC_ROOT设置为/static/static-files 。

I think that you can solve your problem setting properly STATIC_ROOT, making it point to /static/ 我认为您可以正确设置STATIC_ROOT解决问题，使其指向/ static /

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")

Note that STATIC_ROOT is also the path of the folder where files from collectstatic are stored 请注意，STATIC_ROOT还是存储来自collectstatic的文件的文件夹的路径

Answer 2

You need to specify the static path in your url: 您需要在网址中指定静态路径：

body {
    background-image: url("/static/images/home-background.jpeg");
}

Or better yet, 还是更好

body {
    background-image: url("{% static "/static/images/home-background.jpeg" %}");
}

HTML无法在Django中投放图片

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-03-22 17:14:41

解决方案2
0 2015-03-22 17:13:47

HTML无法在Django中投放图片

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-03-22 17:14:41

解决方案2 0 2015-03-22 17:13:47

解决方案1
1 已采纳 2015-03-22 17:14:41

解决方案2
0 2015-03-22 17:13:47