background-image：url不适用于亚马逊s3图像

Question

我想要的是

我正在尝试为类设置背景图像，存储在amazon s3上的图像，我通过rails上的paperclip对象访问图像

css课

.user-area{
    background-image:url('<%[email protected]_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;
}

问题

图像在浏览器上不可见，但是当我访问亚马逊s3网址时（在css类中生成）我可以查看图像。

并且浏览器也会为此文件is a Failed to load resource: the server responded with a status of 403 (Forbidden)抛出403错误

Answer 1

我终于通过对我的css代码进行此更改来解决此问题

改变之前

.user-area{
     background-image:url('<%[email protected]_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;
    }

我只从课堂上移动了背景图像属性并直接添加为内联css到我的div，然后它像魅力一样工作..

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

我不是说这是最好的解决方案，但它足以支持我的代码工作流程。

Answer 2

确保您正在设置图像的高度。如果没有设置.user-area的高度，它将默认为height: 0并且没有区域显示背景。

.user-area {
    background-image:url('<%[email protected]_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
    height: 100px;
}

Answer 3

解！您需要在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>

Answer 4

我有同样的问题，并使用raw不逃避图像url特殊字符（可能是因为我们设置我们的S3桶的方式）。

试试这个：

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

Answer 5

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

图像URL（“图像name.png”）

也可以表示为

URL（ “图像name.png”）

但是在引用AWS上托管的映像时，以下是这两个选项中唯一有效的选项：

URL（ “图像name.png”）