Amazon S3图片的背景图片（background-image:url）无法正常工作。

Question

我想要的

我正在尝试为类设置背景图片，图片存储在Amazon S3上，我通过Rails上的Paperclip对象访问图片。

CSS类

.user-area{
    background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

在浏览器上输出

.user-area{
    background-image:url('https://xyz-customers.s3.amazonaws.com/photos/7/superbackground.jpg?AWSAccessKeyId=xxxxxxxxxxxxx&Expires=1402511741&Signature=xxxxxxxxxxxxxxxx');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

问题

图片在浏览器上不可见，但当我访问Amazon S3 URL（由CSS类生成）时，我可以查看图片。

浏览器还为此文件抛出403错误：Failed to load resource: the server responded with a status of 403 (Forbidden)

- Rameshkumar

---

当我刚刚访问那个URL时，我看不到图片。 - andi

嗨andi，感谢您的快速回复。实际上，在发布这个问题之前，我已经编辑了URL，因为该URL具有AWS S3帐户的访问密钥和ID，不能公开。 - Rameshkumar

如果您可以使用公共图像复制问题，请放置一个fiddle。否则，如果问题特定于其他人无法访问的图像，则没有人能够帮助您。 - andi

@andi，相信我，这张图片确实存在，但现在我没有AWS的访问权限来将其更改为公共图片，因为我正在为客户工作。 - Rameshkumar

我有同样的问题，不仅仅是你！ - northben

@Rameshkumar，你有没有找到更好的方法来修复这个 bug？如果有，请告诉我。 - Dtheekshana

Answer 1

通过对 CSS 代码进行以下更改，我终于解决了这个问题

更改前：

.user-area{
     background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

更改后

.user-area{
        /*I remove the code for background-image:url and make it as inline css on my div*/
        background-repeat:no-repeat;
        width:1025px !important;
        margin-top:100px !important;
    }

然后我将background-image属性从类中单独移动，并将其直接作为内联CSS添加到我的div中，然后它就像魅力一样工作了。

<div class="user-area" style="background-image: url(<%= @user.background_image.expiring_url %>)">
</div>

我并不是说这是最好的解决方案，但对于我的代码工作流来说已经足够了。

- Rameshkumar

---

那个很好用。谢谢你的发布。有人知道为什么它会这样表现吗？看起来很奇怪。 - Loubot

对我也起作用。我认为这与AWS访问管理有关。在内联中，它直接从您的应用程序加载，在CSS中，它从外部加载。因此，您还可以通过更改AWS中的权限来解决此问题。但是您的解决方案对我来说是完美的。 - almo

Answer 2

解决方案！您需要在S3 Bucket上设置CORS标头。请参见此处：S3 - Access-Control-Allow-Origin Header 如果我理解有误，请有人纠正我，但由于我直接向浏览器提供S3内容，这是必要和允许的配置：

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

- northben

---

是的，CSS文件中的URL只能从资产目录中读取。要从S3区域数据库中读取，您需要执行上述操作。谢谢！ - ray

@northben 你有这段代码的JSON格式吗？ - Dtheekshana

Answer 3

请确保设置图像的高度。如果未设置.user-area的高度，则默认为height: 0，无法显示背景区域。

.user-area {
    background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
    height: 100px;
}

- totbar

Answer 4

我曾经遇到过同样的问题，使用了raw来不转义图像URL的特殊字符（可能是因为我们设置S3存储桶的方式不同）。

尝试这个：

background-image:url('<%=raw @user.background_image.expiring_url %>');

- simonvandyk

---

只要注意你可能会打开一个安全漏洞？对我来说并不是问题，因为后台管理员用户上传这些图片。 - simonvandyk

Answer 5

我曾经遇到过同样的问题。但是后来我去了S3控制台，勾选了图像的复选框，并选择了“公开”操作，然后它就可以工作了。

- Wei

---

请添加更多细节以扩展您的答案，例如工作代码或文档引用。 - Community

Answer 6

在我的Rails应用程序中托管图像时，我将其作为样式表的引用：

image-url("image-name.png")

这也可以表示为

url("image-name.png")

但是当引用托管在AWS上的图像时，下面的选项是那两个选项中唯一有效的：

url("image-name.png")

- AliInvestor

Answer 7

我使用了CSS中的原始方法来解决这个问题：

使用原始方法可以消除在CSS样式表中给定URL时添加的额外amp;：

以下是此代码：

.user-area{
    background-image:url('<%= raw(@user.background_image.expiring_url) %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

- Praman Satya