4-（重要）

Question

我想在Django上使用图片文件作为背景图片。但是我不知道怎么做。首先，我阅读了this并尝试在css文件中写下这样的内容。

#third{
    background: url("img/sample.jpeg") 50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

但这不起作用。

{% load staticfiles %}
#third{
    background: url({% static "img/sample.jpeg" %}) 50% 0 no-repeat fixed;
}

和

#third{
    background: url("../img/sample.jpeg") 50% 0 no-repeat fixed;
}

也不起作用。

在css文件上使用background-image时，通常如何编写css文件？你能给我一些建议吗？

C:\~~~~~~> dir hello\static\img
2016/09/28  19:56             2,123 logo.png
2016/09/24  14:53           104,825 sample.jpeg


C:\~~~~~~> dir hello\static\css
2016/09/29  20:27             1,577 site.css


C:\~~~~~~> more lemon\settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)


C:\~~~~~~> more hello\templates\base.html
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/site.css" %}" />

Django版本：1.9.2

Answer 1

使用此：

    #third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

最有可能这样可行。在图片网址之前使用“/ static /”，然后尝试使用它们。感谢

Answer 2

background-image: url('{% static '.jpg' %}');

Answer 3

确保您的INSTALLED_APPS中包含django.contrib.staticfiles。

在settings.py文件中定义STATIC_URL：STATIC_URL = '/static/'

     {% load static %}
     <img src="{% static "my_app/example.jpg" %}" alt="My image"/>

或

     #third{
          background: url('{{ STATIC_URL }}my_app/example.jpg'
     }

Answer 4

由于某些原因，我无法解释接受的答案对我而言没有奏效。（我想将图片用作整个身体的封面图像。）

但是，对于那些可能会对遇到的人有用的人，这是对我有用的替代方法。

在静态文件目录中的css文件中，我编写了以下内容：

CSS：

body {
  background: url(../main/img/picture-name.jpg); 
}

您不必在CSS文件中包含*'{% load static %}'*。

HTML：

在顶部包括{%load static%}
创建指向样式的链接href，如下所示。

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

Answer 5

万一有人在寻找另一种方法来解决此问题，您可能希望从服务器或您有权访问的任何图像托管服务中热链接图像。这是我解决此问题的方法：

在图像托管站点或服务器中上传图像（尝试使用Drive / Dropbox）
右键单击并在新选项卡中打开图像以访问图像URL
复制扩展名为（.jpeg，.png）的图片网址，然后粘贴到HTML文档中。

这是一个例子：

https://images.your-host.com/photos/image-path-here.jpeg

Answer 6

base.html 在正文标签中

    <body>

{% load static %}

    </body>

style.css

#third{
    background: url("/static/img/sample.jpeg")  50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

问题解决

Answer 7

你好，我遇到了一些问题，我使用 pycharmS 作为工具，这是我如何设法解决问题的显然你必须在你的 html 文件中加载 static 并为

设置你的 settings.py

如果一切都做得很好，但问题出在 css 文件上您的图像位于名为 img 的文件夹中，该文件夹位于静态文件夹下你必须这样做：背景：Url("../img/myimage.jpeg")；这是你图片的一部分后台所有设置代码不要放在同一行

<块引用>

背景重复：不重复；

背景附件：固定；

背景位置：居中；

您使用 Chrome 之类的浏览器打开您的项目我使用的是 MICROSOFT EDGE 我的项目没有同时应用任何更改

Answer 8

background-image: url('../img/4799045.jpg');

我认为最好的方式

Answer 9

这是我的项目的目录结构，因此您可以了解我为什么使用我正在使用的 URL 的上下文，因此您可以将其调整到您的项目中。根目录是包含项目和应用程序的文件夹。我有 4 个应用程序（contacto、galeria、inicio、mapa）和“WebCalistenia”，它是您创建项目时生成的文件夹。我有一个静态文件夹，其中有一个名为父亲的孩子（“WebCalistenia”），其中有两个孩子“/css”和“/img”

enter image description here

这对我有用。首先，您必须在 HTML 上 {% load static %}。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
...

现在您将把 CSS 链接到 HTML

    <link rel="stylesheet" href="{% static 'app_name/css/document.css' %}">

最后在你要写的 css 文件上：

background: url("../img/image_name.jpeg");

Answer 10

虽然这里列出的解决方案是正确的，但我只是想再添加一件事，您需要在更新 CSS 后清除浏览器的缓存 (Ctrl + F5)。请参阅此链接。

Django CSS not updating

Answer 11

我遇到了同样的问题。只要确保你的图片在你的 CSS 目录中。因为由于您使用 {% load static %} 以 HTML 加载 CSS 文件，这意味着每次 CSS 文件都会在该目录中搜索图像（我将图像放在“我的 CSS 文件所在的静态目录”之外）这就是为什么它不起作用）。所以简单地说，把你的图片放在静态目录中（你的图片和 CSS 文件在“静态文件夹”的同一目录中）

Answer 12

我遇到了同样的难题，我遵循了上面提到的答案，但由于某些原因，引用对我不起作用。这在模板中对我有用：

{% load static %}

background-image: url('{% static 'my_folder/image.jpg' %}');"

Answer 13

将撇号放在 Django 链接的开头和结尾，它应该可以工作。

background: url('{% static "img/sample.jpeg" %}') 50% 0 no-repeat fixed;

Answer 14

也许你的 url 路径不正确，如果它是正确的，让你的 .css 文件保持静态，并在运行服务器后确保清除所有缓存的图像和文件，你可以按 Ctrl 清除缓存+Shift+Del 并勾选“缓存的图像和文件”。

Answer 15

这是来自 Django Documentation 的最佳解决方案，但我还是发布了简单的解决方案：

1- django.contrib.staticfiles 应包含在您的 INSTALLED_APPS 中

<块引用>

设置.py

文件。

2- 将以下内容添加到

的末尾 <块引用>

settings.py

如果尚未添加。

STATIC_URL = '/static/'

3- 在 html 文件中使用 static 通过 img 标签或 css 加载图像。

{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">

或

{% load static %}
<style>
    .bgimg {
      background-image: url("{% static 'my_app/example.jpg' %}");
    }
</style>

4-（重要）

在您的应用程序目录中创建static文件夹，然后再次使用您的应用程序名称在您的静态文件夹中创建目录，并将您的图像放入其中。文件夹如下：

my_app/static/my_app/example.jpg

完成所有这些步骤后，图像应该显示完美。

Answer 16

只需将 "/static/../img.jpeg" 放在路径 url 之前

使用Django

16 个答案:

4-（重要）

my_app/static/my_app/example.jpg