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

Question

我在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文件夹中，并且缓存目录的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)渲染由../表示的正确url下面是我的设置:

模板中的css文件位于{% compress css %}块中。

s3utils.py(用于在我的bucket中创建单独的媒体和静态目录)

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'

因为另一个方法没有正确设置位置值(它一直为空)

Answer 2

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

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

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

我个人觉得在django-compressor中加入compressor.filters.template.TemplateFilter是错误的。它应该是django的一部分。一个可选的进程，你可以为css和js打开。

Answer 3

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