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

前端之家收集整理的这篇文章主要介绍了使用相对路径在CSS中引用图像在Django中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用内置静态应用程序的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 / 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?

解决方法

问题是由您的URLconf引起的,特别是模式:
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()

猜你在找的CSS相关文章