我想要什么
我正在尝试为类设置背景图像,图像存储在 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(禁止访问)
最佳答案
我终于通过对我的 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>
我并不是说这是最好的解决方案,但它足以满足我的代码工作流程。
关于html - 背景图像 :url not working for amazon s3 image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24169438/