There's a strange issue with Rails 4 on Heroku. When images are compiled they have hashes added to them, yet the reference to those files from within CSS don't have the proper name adjusted. Here's what I mean. I have a file called logo.png. Yet when it shows up on heroku it is viewed as:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
However the CSS still states:
background-image:url("./logo.png");
The result: the image doesn't display. Anybody run into this? How can this be resolved?
Answer 1:
与萨斯一起链轮有一些漂亮的助手 ，你可以用它来完成这项工作。 如果你的样式表文件的扩展名或者是链轮将只处理这些助手.css.scss或.css.sass 。
图片特异性辅助：
background-image: image-url("logo.png")
不可知论帮手：
background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)
或者，如果你想嵌入在CSS文件中的图像数据：
background-image: asset-data-url("logo.png")
Answer 2:
不知道为什么，但使用asset_path 代替 IMAGE_PATH，即使我的图像是资产/ images /目录下，只为我工作的事情是：
例：
app/assets/images/mypic.png
在Ruby中：
asset_path('mypic.png')
在.scss：
url(asset-path('mypic.png'))
更新：
想通了OUT-证明这些资产的助手来自萨斯护栏宝石（我已经安装在我的项目）。
Answer 3:
在Rails 4，你可以参考位于图像assets/images/你.SCSS文件很容易像这样：
.some-div {
background-image: url(image-path('pretty-background-image.jpg'));
}
当您启动在开发模式（应用localhost:3000 ），你应该看到类似这样的：
background-image: url("/assets/pretty-background-image.jpg");
在生产模式下，您的资产将有缓存助手数字：
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
Answer 4:
哈希是因为资产管道和服务器优化缓存http://guides.rubyonrails.org/asset_pipeline.html
尝试是这样的：
background-image: url(image_path('check.png'));
祝好运
Answer 5:
在CSS
background: url("/assets/banner.jpg");
虽然原来的路径是/assets/images/banner.jpg，按照规定，您必须添加只/资产/ url中的方法
Answer 6:
答案都不说，有关的方式，当我要.css.erb扩展，如何引用的图像 。 对我来说，在生产和开发工作都还有：
2.3.1 CSS和ERB
资产管道自动评估ERB。 这意味着如果你添加一个ERB扩展到CSS的资产（例如， application.css.erb ），然后像助手asset_path是在你的CSS规则可供选择：
.class { background-image: url(<%= asset_path 'image.png' %>) }
此写入特定资产所引用的路径。 在这个例子中，这将是有意义的具有图像在资产负载路径，诸如一个app/assets/images/image.png ，这将在这里被引用。 如果这个形象是已经可以在public/assets作为指纹的文件，则该路径被引用。
如果你想使用数据URI -图像数据直接嵌入到CSS文件的方法-你可以使用asset_data_uri帮手。
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }
此插入一个正确格式的数据的URI到CSS源。
请注意，结束标记不能是风格- ％>。
Answer 7:
只有这个片段不为我工作：
background-image: url(image_path('transparent_2x2.png'));
但要stylename.css.scss帮助我重新命名stylename.scss。
Answer 8:
我已经发现了与此摆弄了几个小时之后：
工作原理：
background-image: url(image_path('transparent_2x2.png'));
// how to add attributes like repeat, center, fixed?
上述输出是这样的： "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"
注意前导“/”， 它的引号内 。 还要注意在yourstylesheet.css.scss的SCSS扩展和IMAGE_PATH帮手 。 该图像是在app /资产/ images目录 。
不工作：
background: url(image_path('transparent_2x2.png') repeat center center fixed;
不起作用，无效的属性：
background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;
我不得已将是把这些在我的公开S3存储桶和负载从那里，但最后得到的东西去。
Answer 9:
引用Rails的文件 ，我们看到有从CSS链接到图片的一些方法。 只要到2.3.2节。
首先，确保你的CSS文件具有.scss扩展，如果它是一个SASS文件。
接下来，你可以使用红宝石方法，这是十分可怕的：
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
或者你可以使用的具体形式，是更好：
image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"
最后，你可以使用一般形式：
asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"
Answer 10:
有趣的是，如果我使用“背景图片”，这是行不通的：
background-image: url('picture.png');
但是，仅仅“背景”，它的作用：
background: url('picture.png');
Answer 11:
在某些情况下，下面也可以施放
标志{背景：网址（<％= asset_data_uri 'logo.png' ％>）}
来源： http://guides.rubyonrails.org/asset_pipeline.html
Answer 12:
这应该让你有每一次。
background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);
Answer 13:
默认情况下，轨道4不会为你的资产。 要启用此功能，你需要进入的config / application.rb中，加入这一行：
config.serve_static_assets = true
https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets
Answer 14:
在Rails 4，简单地使用
.hero { background-image: url("picture.jpg"); }
in your style.css file as long as the background image is tucked in app/assets/images.
Answer 15:
您可以添加到你的CSS .erb扩展。 EJ：style.css.erb
然后，你可以把：
background: url(<%= asset_path 'logo.png' %>) no-repeat;
Answer 16:
这为我工作：
background: #4C2516 url('imagename.png') repeat-y 0 0;
文章来源: How to reference images in CSS within Rails 4
