8

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

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

static/
    css/
       main.css
       img/
    js/

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

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}),

相关问题：CSS文件中的相对路径是相对于CSS文件的吗？

4

1 回答 1

9

问题是由您的 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}),

或使用推荐的方法之一：

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()
于 2011-06-12T21:31:00.453 回答