小开

最佳答案

链轮一起萨斯有一些漂亮的帮手你可以用得到的工作完成。如果样式表文件扩展名是.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")

小开

哈希是因为资产管道和服务器优化缓存 http://guides.rubyonrails.org/asset_pipeline.html < / p >

试试这样做:

 background-image: url(image_path('check.png'));

古德勒克

小开

我摆弄了几个小时后发现:

工作原理:

background-image: url(image_path('transparent_2x2.png'));


// how to add attributes like repeat, center, fixed?

上面的输出类似"/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

注意领先的“/”和在引号内。还要注意stylesheet.css.scss中的SCSS扩展和image_path帮助器。图像在应用程序/资产/图片目录.

. conf文件中

不工作:

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(image_path('transparent_2x2.png'));

但是将stylename.scss重命名为stylename.css.scss对我有帮助。

小开

在Rails 4中，你可以像这样在你的.SCSS文件中引用位于assets/images/中的图像:

.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");

小开

不知道为什么，但唯一对我有用的是使用image_path的asset_path 而不是，即使我的图像在资产/图像/目录下:

例子:

app/assets/images/mypic.png

在Ruby中:

asset_path('mypic.png')

在.scss:

url(asset-path('mypic.png'))

更新:

弄清楚了-原来这些资产助手来自< >强sass-rails < / >强宝石(我已经安装在我的项目中)。

小开

在css中

background: url("/assets/banner.jpg");

尽管原始路径是/assets/images/banner.jpg，但按照惯例，您必须在url方法中只添加/assets/

小开

这应该能让你每次都做到。

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

小开

默认情况下，Rails 4不会为您的资产服务。要启用此功能，您需要进入配置/应用程序。Rb，加上这一行:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

小开

有趣的是，如果我使用'background-image'，它不起作用:

background-image: url('picture.png');

但是仅仅是“背景”，它就做到了:

background: url('picture.png');

小开

没有一个答案说的方式，当我有.css.erb扩展，如何引用图片。对我来说，工作在生产和发展以及:

2.3.1 CSS和ERB

资产管道自动计算ERB。这意味着如果你向CSS资产(例如，application.css.erb)添加一个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' %>) }

这将在CSS源中插入格式化正确的数据URI。

注意，结束标记的样式不能是-%>。

小开

在Rails 4中，只需使用

。英雄{ 背景图片:url(“picture.jpg”); } ，只要背景图像是隐藏在app/assets/images.

.css文件中的>

小开

在某些情况下，以下几点也适用

Logo {background: url(<%= asset_data_uri ' Logo .png' %>)}

来源:http://guides.rubyonrails.org/asset_pipeline.html

小开

引用Rails文档，我们看到有几种方法可以链接到css中的图像。请参阅第2.3.2节。

首先，如果您的css文件是sass文件，请确保它具有.scss扩展名。

接下来，你可以使用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"

最后，你可以使用一般形式:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

小开

这招对我很管用:

background: #4C2516 url('imagename.png') repeat-y 0 0;

小开

你可以添加到你的css .erb扩展名。Ej: style.css.erb

然后你可以放:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

小开

当使用宝石'sass-rails'时，在Rails 5, bootstrap 4中，以下对我有用，

在.scss文件:

    background-image: url(asset_path("black_left_arrow.svg"));

视图文件(例如.html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

Rails:如何在Rails 4中引用CSS中的图像

Logo {background: url(<%= asset_data_uri ' Logo .png' %>)}