ruby-on-rails - ruby on rails教程




如何在Rails 4中引用CSS中的图像 (11)

不知道为什么,但只为我工作的是使用asset_path 而不是 image_path ,即使我的图像位于assets / images /目录下:

例:

app/assets/images/mypic.png

在Ruby中:

asset_path('mypic.png')

在.scss中:

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

更新:

想通了 - 这些资产助手来自sass-rails gem(我已经安装在我的项目中)。

Heroku上的Rails 4有一个奇怪的问题。 当图像被编译时,它们会添加哈希值,但是从CSS内部引用这些文件没有调整正确的名称。 这是我的意思。 我有一个名为logo.png的文件。 然而,当它显示在heroku上时,它被视为:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

但是CSS仍然指出:

background-image:url("./logo.png");

结果:图像不显示。 有人遇到这个? 这怎么解决?


参考http://guides.rubyonrails.org/asset_pipeline.html我们发现有几种方法可以链接到来自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"

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

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

在CSS中

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

虽然原始路径是/assets/images/banner.jpg,但按照惯例,您必须在url方法中添加/ 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-image',它不起作用:

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

但只是'背景',它确实:

background: url('picture.png');

这对我有效:

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

这应该让你在那里每一次。

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





ruby-on-rails-4