我的静态文件夹结构是这样的:
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 / folder而不是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?
解决方法
r'^static/(?P<path>.*)/$'
这意味着URL必须以正斜杠结尾才能匹配此模式.即以下URL不匹配:(因为它没有尾部斜杠)
/mysite/static/css/main.css
奇怪的是,它确实有效.原因是Django的APPEND_SLASH
设置:
When set to True,if the request URL does not match any of the patterns in the URLconf and it doesn’t end in a slash,an HTTP redirect is issued to the same URL with a slash appended. Note that the redirect may cause any data submitted in a POST request to be lost.
因此,当您的浏览器发出请求时:
/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/
但显然这也会失败.
解决方案
将您的网址格式更改为以下内容:(请注意已删除的格式中的尾随/)
(r'^static/(?P<path>.*)$',
或者使用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()