我想要的是
我正在尝试为class设置背景图像,该图像存储在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错误, is a Failed to load resource: the server responded with a status of 403 (Forbidden)
我终于通过在我的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" > </div>
我并不是说这是最好的解决方案,但是对于我的代码工作流程来说已经足够了。