在Django中，用相对路径引用CSS中的图片不起作用

如何解决在Django中，用相对路径引用CSS中的图片不起作用

|| 我正在使用带有内置静态应用程序的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}),

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

解决方法

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

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

这意味着该URL必须以正斜杠结尾才能匹配此模式。也就是说，以下网址不匹配：（因为它没有斜杠）

/mysite/static/css/main.css

奇怪的是，它确实起作用。原因是Django的ѭ11设置：   设置为True时，如果请求URL与URLconf中的任何模式都不匹配，并且不以斜杠结尾，则将HTTP重定向发送到同一URL，并附加斜杠。请注意，重定向可能会导致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()