django-compressor: изображения CSS с дорожкой относительно папки

Question

Я использую django-compresor для приложения, развернутого на герой, с амазоном S3, обслуживающим статические файлы. Все работает отлично, за исключением того, что изображения в моем css, указанные в background-image: url() не отображаются с правильным путем.

Мои статические файлы организованы в следующей структуре каталогов:

-static 
    -myapp 
     -js 
     -css 
     -img 
    -bootstrap 
     -js 
     -css 
     -img 
    -othervendor 
     -js 
     -css 
     -img 

Поэтому путь я использую в URL() является относительно файла CSS:

url("../img/icon.png") 

Все из мои css-файлы сжимаются и перемещаются в папку CACHE в моем статическом каталоге, а URL-адрес в каталоге CACHE отображается правильно:

https://mybucket.s3.amazonaws.com/static/CACHE/css/somehash.css 

Проблема заключается в том, что изображения в URL CSS файлы() отображаются в виде:

https://mybucket.s3.amazonaws.com/static/CACHE/img/imagefile.png 

и должно быть:

https://mybucket.s3.amazonaws.com/static/myapp/img/imagefile.png 

или если изображения были скопированы в каталог КЭШ это будет работа:

https://mybucket.s3.amazonaws.com/static/CACHE/img/imagefile.png 

Моя временное решение заключается в изменении пути изображений в моем CSS к следующему, и она работает:

url("/static/foldername/img/icon.png") 

Я новичок в компрессоре django &, поэтому я не уверен, каково должно быть правильное поведение, но это не кажется правильным. Как я вижу это, проблема может быть устранена, если я могу заставить компрессор django выполнить одну из двух задач: 1) скопировать все изображения, на которые ссылаются в css url(), в каталог CASHE/img OR 2) сделать правильный URL-адрес, представленный ../ Вот моя установка:

Файлы css в моем шаблоне находятся в блоке {% compress css%}.

s3utils.py (используется для изготовления отдельных средств массовой информации и статические каталоги в моем ведре)

from storages.backends.s3boto import S3BotoStorage 

StaticS3BotoStorage = lambda: S3BotoStorage(location='static') 
StaticRootS3BotoStorage = lambda: S3BotoStorage(location='static') 
MediaS3BotoStorage = lambda: S3BotoStorage(location='media') 
MediaRootS3BotoStorage = lambda: S3BotoStorage(location='media') 

settings.py

DEFAULT_FILE_STORAGE = 'myapp.settings.s3utils.MediaRootS3BotoStorage' 
STATICFILES_STORAGE = 'myapp.settings.s3utils.StaticRootS3BotoStorage' 

AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID') 
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY') 
AWS_STORAGE_BUCKET_NAME = os.environ.get('AWS_STORAGE_BUCKET_NAME') 

S3_URL = 'http://%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME 
MEDIA_URL = S3_URL+'media/' 
MEDIA_ROOT = S3_URL+'media/' 
STATIC_URL = S3_URL+'static/' 
STATIC_ROOT = S3_URL+'static/' 

COMPRESS_STORAGE = STATICFILES_STORAGE 
COMPRESS_URL = STATIC_URL 
COMPRESS_ROOT = STATIC_ROOT 

Im мышление должно быть какой-то параметр, который указывает компрессор для копирования CSS url ("../ img/image.png") в каталог CACHE/img ???

Answer 1

У меня была та же проблема!

для меня Сначала казалось, что это проблема с компрессором. Я изменил свою приставку S3Storage Backend из

StaticS3Backend = lambda: S3BotoStorage(location='static') 

в

class StaticS3Backend(S3BotoStorage): 
    location = 'static' 

, потому что другой метод не установлен правильное значение местоположения (Он остался пустым)

Это исправило проблему для меня.

Answer 2

Я не нашел никакого хорошего решения. Некоторые полезные обсуждения здесь https://github.com/jezdez/django_compressor/issues/226

В вашем файле CSS используйте абсолютный путь, указывающий на URL-адрес изображения на вашем Amazon S3, чтобы он работал. Но, разумеется, это глупо. Почему я хочу, чтобы моя локальная среда разработки и тестирования использовала изображение из prod? Несколько раз, это даже не приемлемо. Предположим, вы хотите изменить изображение и проверить его на некоторое время. (Вы можете вручную загрузить новое изображение на s3 и вручную изменить все тысячи ссылок css на это изображение на новый URL. Опять же, глупый.)

Немного лучший способ использования {{STATIC_URL}} в вашем css для постройте абсолютный путь вместо относительного пути. Да, вы можете использовать {{STATIC_URL}}, если вы добавите компрессор.filters.template.TemplateFilter, упомянутый здесь https://django_compressor.readthedocs.org/en/1.3/settings/#base-settings. Это решает проблему с несколькими этапами. Но это не работает для локального развития, потому что вы здесь не сжимаете, и если вы это сделаете, вам будет трудно отлаживать время.

Лично я чувствую, что у меня есть компрессор.filters.template.TemplateFilter внутри django-compressor неправильный. Он должен быть частью джанго. Необязательный процесс, который вы можете включить для css и js.

Answer 3

Я столкнулся с этим недавно и решил его, установив COMPRESS_OUTPUT_DIR = ''. Это привело к тому, что сжатые файлы сохранялись в статическом корне, а не по умолчанию для каталога «CACHE» под static.