背景图像：网址不适用于亚马逊 s3 图像答案

【问题标题】：background-image:url not working for amazon s3 image背景图像：网址不适用于亚马逊 s3 图像
【发布时间】：2014-08-01 21:29:02
【问题描述】：

我想要什么

我正在尝试为类设置背景图像，该图像存储在 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&amp;Expires=1402511741&amp;Signature=xxxxxxxxxxxxxxxx');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

问题

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

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

【问题讨论】：

当我刚刚转到那个 URL 时，我看不到图像。
嗨，andi，感谢您的快速回复，实际上，在发布此问题之前，我已经编辑了 URL，因为该 URL 具有 AWS S3 帐户的访问密钥和 ID，因此不能公开。 ,
如果您可以使用公共图像复制问题，请竖起小提琴。否则，如果问题特定于其他人无法访问的图像，则没有人可以帮助您。
@andi，相信我图像就在那里，现在我无法访问 AWS 将图像更改为公共图像，我正在为客户工作。
我也有同样的问题，不只是你！

标签： html css ruby-on-rails amazon-web-services amazon-s3

【解决方案1】：

我遇到了同样的问题。但后来我去了 S3 控制台，检查了图像的复选框，然后选择了“公开”操作，它起作用了。

【讨论】：

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

【解决方案2】：

我在 background-image css 中使用 raw 方法 解决了这个问题：使用 raw 方法将删除额外添加的放大器；当在 css 样式表中给出 url 时，它会被加起来：

下面是代码：

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

【讨论】：

【解决方案3】：

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

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

也可以表示为

url("图片名称.png")

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

url("图片名称.png")

【讨论】：

【解决方案4】：

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

试试这个：

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

【讨论】：

请注意您可能会打开一个安全漏洞？后台管理员用户上传了这些图片，这对我来说不是问题。

【解决方案5】：

解决方案！您需要在 S3 存储桶上设置 CORS 标头。见这里：S3 - Access-Control-Allow-Origin Header

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

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

【讨论】：

是的，来自 css 文件的 url，只能从资产目录中读取。要从 S3 区域数据库中读取，您需要执行上述操作。谢谢！
@northben 你有这段代码的json格式吗

【解决方案6】：

我终于通过对我的 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>

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

【讨论】：

效果很好。谢谢您的发布。有谁知道它为什么会这样？看起来很奇怪。
也适合我。我认为这与 AWS 访问管理有关。内联它直接从您的应用程序加载它，在 CSS 中它从外部加载它。因此，您还可以通过更改 AWS 中的权限来解决此问题。但你的解决方案对我来说是完美的。

【解决方案7】：

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

【讨论】：