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

Question

我使用django-compresor作为部署在heroku上的应用程序,亚马逊S3提供静态文件.一切都工作正常,除了我在背景图像中引用的css中的图像:url()没有使用正确的路径呈现.

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

-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和压缩机的新手,所以我不确定应该是什么样的正确行为,但这似乎不正确.我看到它的方式,问题可以是固定的,如果我能得到的Django压缩机做两件事情:1)复制)在CSS的url(引用的所有图像到CASHE/IMG目录或2)使所代表的正确网址../这是我的设置:

我的模板中的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目录???

Answer 1

我遇到过同样的问题！

对我来说，首先看起来好像是压缩机的问题。我将我的前缀 S3Storage 后端从

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

到

class StaticS3Backend(S3BotoStorage):
    location = 'static'

因为另一种方法没有正确设置位置值（它保持为空）

这为我解决了这个问题。