Ruby-on-rails 如何在 Rails 4 中引用 CSS 中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15257555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reference images in CSS within Rails 4
提问by Nick ONeill
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:
Heroku 上的 Rails 4 有一个奇怪的问题。编译图像时，它们会添加哈希值，但 CSS 中对这些文件的引用没有调整正确的名称。这就是我的意思。我有一个名为 logo.png 的文件。然而，当它出现在 heroku 上时，它被视为：
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
However the CSS still states:
但是 CSS 仍然指出：
background-image:url("./logo.png");
The result: the image doesn't display. Anybody run into this? How can this be resolved?
结果：图像不显示。有人遇到这个吗？如何解决这个问题？
回答by zeeraw
Sprockets together with Sass has some nifty helpersyou can use to get the job done. Sprockets will onlyprocess these helpers if your stylesheet file extensions are either .css.scssor .css.sass.
Sprockets 和 Sass 有一些漂亮的助手，你可以用它来完成工作。链轮将只如果你的样式表文件的扩展名或者是处理这些助手.css.scss或.css.sass。
Image specific helper:
图像特定的助手：
background-image: image-url("logo.png")
Agnostic helper:
不可知论者：
background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)
Or if you want to embed the image data in the css file:
或者，如果要将图像数据嵌入到 css 文件中：
background-image: asset-data-url("logo.png")
回答by Yarin
Don't know why, but only thing that worked for me was using asset_pathinsteadof image_path, even though my images are under the assets/images/directory:
不知道为什么，但使用该工作对我来说唯一的事情就是asset_path代替的IMAGE_PATH，即使我的图像是在资产/图像/目录：
Example:
例子：
app/assets/images/mypic.png
In Ruby:
在红宝石中：
asset_path('mypic.png')
In .scss:
在 .scss 中：
url(asset-path('mypic.png'))
UPDATE:
更新：
Figured it out- turns out these asset helpers come from the sass-railsgem (which I had installed in my project).
结果发现这些资产助手来自sass-railsgem（我已经在我的项目中安装了它）。
回答by sergserg
In Rails 4, you can reference an image located in assets/images/in your .SCSSfiles easily like this:
在Rails 4，你可以参考位于图像assets/images/在你的.SCSS文件很容易像这样：
.some-div {
background-image: url(image-path('pretty-background-image.jpg'));
}
When you launch the application in development mode (localhost:3000), you should see something like:
当您以开发模式 ( localhost:3000)启动应用程序时，您应该看到如下内容：
background-image: url("/assets/pretty-background-image.jpg");
In production mode, your assets will have the cache helper numbers:
在生产模式下，您的资产将具有缓存助手编号：
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
回答by Mauro Dias
The hash is because the asset pipeline and server Optimize caching http://guides.rubyonrails.org/asset_pipeline.html
哈希是因为资产管道和服务器优化缓存 http://guides.rubyonrails.org/asset_pipeline.html
Try something like this:
尝试这样的事情：
background-image: url(image_path('check.png'));
Goodluck
祝你好运
回答by user2458192
In css
在 CSS 中
background: url("/assets/banner.jpg");
although the original path is /assets/images/banner.jpg, by convention you have to add just /assets/ in the url method
尽管原始路径是 /assets/images/banner.jpg，但按照惯例，您必须在 url 方法中只添加 /assets/
回答by Arup Rakshit
None of the answers says about the way, when I'll have .css.erbextension, how to reference images. For me worked both in productionand developmentas well :
没有一个答案说的是方式，当我有.css.erb扩展时，如何引用图像。对我来说，同时也从事生产和开发工作：
The asset pipeline automatically evaluates ERB. This means if you add an erb extension to a CSSasset (for example, application.css.erb), then helpers like asset_pathare available in your CSS rules:
资产管道自动评估ERB。这意味着，如果您向CSS资产添加 erb 扩展（例如，application.css.erb），那么asset_path在您的 CSS 规则中可以使用像这样的助手：
.class { background-image: url(<%= asset_path 'image.png' %>) }
This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as app/assets/images/image.png, which would be referenced here. If this image is already available in public/assetsas a fingerprinted file, then that path is referenced.
这将写入所引用的特定资产的路径。在此示例中，在资产加载路径之一中放置图像是有意义的，例如app/assets/images/image.png，此处将引用该路径。如果此图像已public/assets作为指纹文件可用，则引用该路径。
If you want to use a data URI - a method of embedding the image data directly into the CSSfile - you can use the asset_data_urihelper.
如果要使用数据 URI（一种将图像数据直接嵌入到CSS文件中的方法），可以使用asset_data_uri帮助程序。
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }
This inserts a correctly-formatted data URI into the CSS source.
这会将格式正确的数据 URI 插入 CSS 源。
Note that the closing tag cannot be of the style -%>.
请注意，结束标记不能是 -%> 样式。
回答by s.vatagin
Only this snippet does not work for me:
只有这个片段对我不起作用：
background-image: url(image_path('transparent_2x2.png'));
But rename stylename.scssto stylename.css.scsshelps me.
但是将stylename.scss重命名为stylename.css.scss对我有帮助。
回答by Nick Res
Referencing the Rails documentswe see that there are a few ways to link to images from css. Just go to section 2.3.2.
参考Rails 文档，我们看到有几种方法可以从 css 链接到图像。只需转到第 2.3.2 节。
First, make sure your css file has the .scss extension if it's a sass file.
首先，如果您的 css 文件是 sass 文件，请确保它具有 .scss 扩展名。
Next, you can use the ruby method, which is really ugly:
接下来就可以使用ruby的方法了，真的很丑：
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }
Or you can use the specific form that is nicer:
或者您可以使用更好的特定形式：
image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"
Lastly, you can use the general form:
最后，您可以使用一般形式：
asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"
回答by Danny
WHAT I HAVE FOUND AFTER HOURS OF MUCKING WITH THIS:
经过数小时的研究，我发现了什么：
WORKS :
作品：
background-image: url(image_path('transparent_2x2.png'));
// how to add attributes like repeat, center, fixed?
The above outputs something like: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"
上面的输出类似于： "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"
Notice the leading "/", and it's within quotes. Also note the scss extension and image_path helperin yourstylesheet.css.scss. The image is in the app/assets/images directory.
注意前导 "/"，它在引号内。还要注意yourstylesheet.css.scss 中的 scss 扩展名和 image_path 助手。图像位于app/assets/images 目录中。
Doesn't work:
不起作用：
background: url(image_path('transparent_2x2.png') repeat center center fixed;
doesn't work, invalid property:
不起作用，无效的属性：
background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;
My last resort was going to be to put these in my public s3 bucket and load from there, but finally got something going.
我最后的手段是将这些放在我的公共 s3 存储桶中并从那里加载，但最终还是有所进展。
回答by AnderSon
Interestingly, if I use 'background-image', it does not work:
有趣的是，如果我使用“背景图像”，它不起作用：
background-image: url('picture.png');
But just 'background', it does:
但只是“背景”，它确实：
background: url('picture.png');
