django 背景图片在标签内时不加载< style>,在自身内样式化时效果良好< div>,不是文件路径不正确的问题

tvokkenx 于 2023-03-31 发布在 Go

关注(0)|答案(2)|浏览(75)

我无法将背景图像放入<style>标记中，我不知道为什么它不起作用。
以下所有操作都是在我的本地机器上完成的。我的网站也托管在Linode服务器上。
我有下面的代码，它工作正常。它直接在主体内的div中设置背景图像的样式（通过Django）：

<body>
    <div class="scroll-container" style="background-image: url('{% static 'myapp/scroll-L.jpg' %}');">
    </div>
</body>

当我加载页面时，您可以看到滚动图像加载良好（image 1 https://i.imgur.com/T75mFyl.png）
然而，当我将背景图像放入<head>中的<style>标记时，一切都开始出错：

<style>
    .scroll-container {
        background-image: url("../../static/myapp/scroll-L.jpg")
    }
</style>

当我加载页面时，您可以看到滚动图像未加载（image 2 https://i.imgur.com/RCsWhE7.png）
我不能在head样式标签中使用Django的{% static ... %}，所以这不起作用。
这显然与对象存储（eu-central-1.linodeobjects）有关，但我不知道是什么原因。为什么在使用div样式而不是style标记中的图像时，它会工作？
我已经找了大约2个小时，试图找到一个解决办法，但我不能弄清楚。
文件路径是正确的，但只是为了确认，我已经尝试了以下没有成功：

.scroll-container {
    background-image: url("static/myapp/scroll-L.jpg")
}

.scroll-container {
    background-image: url("/static/myapp/scroll-L.jpg")
}

.scroll-container {
    background-image: url("/../../static/myapp/scroll-L.jpg")
}

{% load static %}
.scroll-container {
    background-image: url("{% static 'myapp/scroll-L.jpg' %}")
}

我需要做一些事情，而不是把背景图像直接放在div中，因为我正在为我的网站整理CSP，如果它是直接设置到div的样式，我不能为它设置nonce或hash。
我还尝试将图像直接放在templates文件夹中，这样我就可以调用：

.scroll-container {
    background-image: url("scroll-L.jpg")
}

然而这也不起作用。我也试着把它放进master.css，但收效甚微。
编辑：以下是我在www.example.com中存储对象的代码settings.py:

# Object Storage for Django static files (https://www.codingforentrepreneurs.com/blog/linode-object-storage-for-django-static-files/)
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400',
}

LINODE_BUCKET = os.environ.get('LINODE_BUCKET', 'hmst-bucket')
LINODE_BUCKET_REGION = os.environ.get('LINODE_BUCKET_REGION', 'eu-central-1')
LINODE_BUCKET_ACCESS_KEY = os.environ.get('LINODE_BUCKET_ACCESS_KEY', '#')
LINODE_BUCKET_SECRET_KEY = os.environ.get('LINODE_BUCKET_SECRET_KEY', '#')

AWS_S3_ENDPOINT_URL = f'https://{LINODE_BUCKET_REGION}.linodeobjects.com'
AWS_ACCESS_KEY_ID = LINODE_BUCKET_ACCESS_KEY
AWS_SECRET_ACCESS_KEY = LINODE_BUCKET_SECRET_KEY
AWS_S3_REGION_NAME = LINODE_BUCKET_REGION
AWS_S3_USE_SSL = True
AWS_STORAGE_BUCKET_NAME = LINODE_BUCKET

AWS_DEFAULT_ACL = None

django

来源：https://stackoverflow.com/questions/75843914/background-image-not-loading-when-within-style-tags-it-works-fine-when-styled

2条答案

按热度按时间

7kqas0il1#

您希望使用s3存储作为CloudFront（CDN），因此需要配置AWS_S3_CUSTOM_DOMAIN变量。

AWS_S3_CUSTOM_DOMAIN = 'cdn.mydomain.com'

官方django-storages文档。点击查看

赞(0）回复(0）举报 2023-03-31

kgqe7b3p2#

这是一个解决方案，任何人都有同样的问题在未来。
我没有调用背景图像的文件路径，而是直接从Object Storage bucket调用图像：

<style>
    .scroll-container {
        background-image: url("https://hmst-bucket.eu-central-1.linodeobjects.com/myapp/scroll-L.jpg");
    }
</style>

然后，当我试图打开图像时，出现了403（禁止错误）并显示以下消息：

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<BucketName>hmst-bucket</BucketName>
<RequestId>#</RequestId>
<HostId>#</HostId>
</Error>

因此，我需要更改访问控制列表（ACL）的权限。我将对象存储的Bucket级别ACL和Object级别ACL从Private更改为Public Read。
我使用Linode，所以我遵循这个指南：https://www.linode.com/docs/products/storage/object-storage/guides/acls/。要更改对象级别ACL，指南中说您需要单击更多选项省略号并选择 Details，但是这已经过时了，您需要单击实际对象本身。
更改这些权限解决了此问题。

赞(0）回复(0）举报 2023-03-31

我来回答

django 背景图片在标签内时不加载< style>,在自身内样式化时效果良好< div>,不是文件路径不正确的问题

2条答案

相关问题

热门标签

最新问答