Question

我想要什么

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

css class

.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&amp;Expires=1402511741&amp;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('<%=@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>

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

Answer 2

确保您正在设置图像的高度。如果.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;
}

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来逃避图片网址特殊字符（可能是因为我们设置S3存储桶的方式）。

试试这个：

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

Answer 5

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

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

也可以表示为

URL（ “图像name.png”）

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

URL（ “图像name.png”）

Answer 6

我在背景图片CSS中使用原始方法解决了该问题：使用原始方法将删除多余的放大器；在CSS样式表中指定网址时，该值会加起来：

下面是此代码：

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

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

6 个答案: