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

Question

Я использую 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 в папку media, и проблема та же.

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

в 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?

Answer 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 по умолчанию True)

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