django-compressor:具有相对于文件夹的路径的CSS图像

时间:2013-03-12 14:48:06

标签: django-compressor

我正在将django-compresor用于部署在heroku上的应用程序,其中amazon S3提供静态文件。除了在background-image:url()中引用的css中的图像没有使用正确的路径渲染时,一切都工作正常。

我的静态文件按以下目录结构组织:

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

因此,我在url()中使用的路径是相对于css文件的:

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

我的所有css文件都被压缩并移动到我的静态目录中的CACHE文件夹中,并且CACHE目录的url正确呈现为:

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

问题是css文件url()中的图像呈现为:

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

应该是:

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

或者如果图像被复制到CACHE目录,这将起作用:

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

我的临时解决方法是将我的css中的图像路径更改为以下内容并且可以正常工作:

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

我是django& amp;的新手压缩机,所以我不确定应该是什么样的正确行为,但这似乎不正确。我看到它的方式,问题可以解决,如果我可以让django压缩器做两件事之一:1)将css url()中引用的所有图像复制到CASHE / img目录或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

我认为必须有一些设置告诉压缩器将css url(“../ img / image.png”)复制到CACHE / img目录???

3 个答案:

答案 0 :(得分:2)

我有同样的问题!

对我而言首先好像是压缩机的问题。我从

更改了我的前缀S3Storage后端
StaticS3Backend = lambda: S3BotoStorage(location='static')

class StaticS3Backend(S3BotoStorage):
    location = 'static'

因为另一种方法没有将位置值设置为正确(它保持为空)

这解决了我的问题。

答案 1 :(得分:1)

我根本找不到任何好的解决方案。 这里有一些很好的讨论https://github.com/jezdez/django_compressor/issues/226

在CSS文件中,使用指向Amazon S3上的图像网址的绝对路径将使其正常工作。但不用说,这是愚蠢的。为什么我希望我的本地开发和测试环境都使用prod的图像?有时,它甚至都不可接受。假设您想要更改图像并测试一段时间。 (您可以手动将新图像上传到s3,并手动将所有数千个对此图像的css引用更改为新网址。再次,愚蠢。)

稍微好一点的方法是在你的css中使用{{STATIC_URL}}来构建绝对路径而不是相对路径。是的,如果添加https://django_compressor.readthedocs.org/en/1.3/settings/#base-settings中提到的compress.filters.template.TemplateFilter,则可以使用{{STATIC_URL}}。 这解决了多阶段问题。但是,它不适用于本地开发,因为你没有在这里进行压缩,如果你这样做,你将很难调试。

我个人认为django-compressor中的compress.filters.template.TemplateFilter是错误的。它应该是django的一部分。可以为css和js打开的可选过程。

答案 2 :(得分:0)

我最近碰到了这个并通过设置COMPRESS_OUTPUT_DIR = ''解决了这个问题。这导致压缩文件保存在静态根目录中,而不是默认的' CACHE'静态下的目录。