8

我正在将 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）呈现由表示的正确 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')

设置.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 目录？

4

3 回答 3

2

我遇到过同样的问题！

对我来说，它首先似乎是压缩机的问题。我将我的前缀 S3Storage 后端从

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

至

class StaticS3Backend(S3BotoStorage):
    location = 'static'

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

这为我解决了这个问题。

于 2013-03-26T10:24:41.710 回答
1

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

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

更好的方法是在你的 CSS 中使用 {{STATIC_URL}} 来构建绝对路径而不是相对路径。是的，如果您添加此处提到的compressor.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 打开的可选进程。

于 2013-09-10T18:26:01.027 回答
1

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

于 2018-02-06T02:55:45.393 回答