背景图片：url不适用于amazon s3图片

Question

我想要什么

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

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错误，是加载资源失败：服务器响应状态为403（禁止）

Answer 1

解决方案！您需要在S3存储桶上设置CORS标头。请参阅此处：S3-Access-Control-Allow-Origin标头

如果我错了，请有人纠正我，但由于我直接向浏览器提供S3内容，这是必要且允许的配置：

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

Answer 2

确保您正在设置图像的高度。如果<代码>的高度。未设置用户区域，它将默认为高度：0，并且没有显示背景的区域。

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

Answer 3

通过对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;
    }

我从类中单独移动了背景图像属性，并将其作为内联css直接添加到我的div中，然后它像charm一样工作。。

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

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