使用相对路径在 CSS 中引用图像在 Django 中不起作用

Question

我正在使用带有内置静态应用程序的 Django 1.3。

我的静态文件夹结构是这样的：

static/
    css/
       main.css
       img/
    js/

所以我尝试从 CSS 中引用 static/css/img/ 文件夹下的图像，如下所示：

background:url('img/btn_white.gif') repeat-x;

但是图像没有显示出来。当我在 Chrome 中检查元素时，我发现图像路径是 http://localhost/mysite/static/css/main.css/img/btn_white.gif/

这很奇怪，因为这个相对路径应该引用 static/css/ 文件夹而不是 main.css。所以我尝试将路径更改为url('../img/btn_white.gif')，它适用于Chrome和Firefox，但不适用于IE。

我很确定这个问题与 Django 有关，因为在我的纯 HTML/CSS 中，这个相对路径工作得很好。我也尝试将css放在媒体文件夹中，问题是一样的。

我的静态应用相关设置：

在 settings.py 中：

STATIC_ROOT = os.path.join(os.path.dirname(__file__),'static').replace('\\','/')
STATIC_URL = 'http://localhost/mysite/static/'

在 urls.py 中：

(r'^static/(?P<path>.*)/$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),

相关问题：Is a relative path in a CSS file relative to the CSS file?

Answer 1

问题是由您的 URLconf 引起的，特别是模式：

r'^static/(?P<path>.*)/$'

这意味着 URL 必须以正斜杠结尾才能匹配此模式。即以下 URL 将不匹配：（因为它没有尾部斜杠）

/mysite/static/css/main.css

奇怪的是，它确实有效。原因是 Django 的APPEND_SLASH 设置：

当设置为 True 时，如果请求 URL 不匹配 URLconf 中的任何模式并且它没有以斜杠结尾，则会向附加斜杠的相同 URL 发出 HTTP 重定向。请注意，重定向可能会导致在 POST 请求中提交的任何数据丢失。

所以当您的浏览器发出请求时：

/mysite/static/css/main.css

...Django 将无法将其与任何 URL 匹配，并将发出重定向到：（因为 APPEND_SLASH 默认为 True）

mysite/static/css/main.css/

这个新请求将成功，您的浏览器现在可以下载 CSS 文件，但是 CSS 文件的资源 URL 现在以斜杠结尾。当您的浏览器处理 CSS 规则并遇到：

background:url('img/btn_white.gif') repeat-x;

它将尝试将该相对 URI 连接到 CSS 资源的 URI。例如：

/mysite/static/css/main.css/ + img/btn_white.gif = /mysite/static/css/main.css/img/btn_white.gif

这将失败，因此您的浏览器将重定向到：（同样是因为APPEND_SLASH）

/mysite/static/css/main.css/img/btn_white.gif/

但显然这也会失败。

解决方案

将您的 URL 模式更改为以下内容：（注意模式中删除的尾随 /）

(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),

或者使用recommended methods之一：

from django.conf import settings

if settings.DEBUG:
    urlpatterns += patterns('django.contrib.staticfiles.views',
        url(r'^static/(?P<path>.*)$', 'serve'),
    )

…或：

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

# ... the rest of your URLconf here ...

urlpatterns += staticfiles_urlpatterns()