Ссылка на изображение в CSS с относительным путем не работает в Django

Я использую 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/

что очень странно, так как этот относительный путь должен был ссылаться вместо main.css. Поэтому я попытался измениться. путь url('../img/btn_white.gif'), и он работает в Chrome и Firefox, но не в IE.

Я уверен, что эта проблема связана с Django, потому что в моем чистом HTML/CSS этот относительный путь работает отлично. Я также попытался поместить css в папку media, и проблема та же.

Мои настройки, связанные со статическим приложением:

in settings.py:

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

in urls.py:

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

вопрос: относительный путь в CSS-файле относительный в файл CSS?

8
django django-static

1 ответов

проблема вызвана вашим URLconf, в частности шаблоном:

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

это означает, что URL должны конец в косой черте, чтобы он соответствовал этому шаблону. т. е. следующий URL не будет соответствовать: (потому что у него нет косой черты)

/mysite/static/css/main.css

самое странное, что он тут работа. Причина этого-Джанго APPEND_SLASH установка:

когда установите значение True, если URL-адрес запроса не соответствует ни одному из шаблонов в URLconf и не заканчивается косой чертой, http-перенаправление выдается на тот же URL-адрес с добавленной косой чертой. Обратите внимание, что перенаправление может привести к потере любых данных, представленных в запросе POST.

поэтому, когда ваш браузер делает запрос:

/mysite/static/css/main.css

...Django не сможет сопоставить его с любым из URL-адресов и выдаст перенаправление на: (Потому что APPEND_SLASH по умолчанию Правда)

mysite/static/css/main.css/

этот новый запрос будет успешным, и ваш браузер теперь сможет загрузить файл CSS, однако URL-адрес ресурса файла CSS теперь заканчивается косой чертой. Когда ваш браузер обрабатывает правила CSS и сталкивается:

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

он попытается присоединить этот относительный URI к URI ресурса CSS. например:

/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()
9