ruby-on-rails rails教程 - 如何在Rails 4中引用CSS中的图像




heroku ruby-on-rails-4 (14)

不知道为什么,但只为我工作的是使用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");

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



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

然后你可以把:

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

在CSS中

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

虽然原始路径是/assets/images/banner.jpg,但按照惯例,您必须在url方法中添加/ assets /


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

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

在Rails 4中,只需使用

.hero { background-image: url("picture.jpg"); }

在你的style.css文件中,只要背景图像放在app / assets / images中即可。


我用这个发现了几个小时后发现了什么:

作品:

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桶中并从那里装载,但最后还是有一些事情要做。


参考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"

这对我有效:

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


答案中没有一个是关于这种方式的,当我有.css.erb扩展名时,如何引用图像 。 对于我来说,在生产开发方面也一样:

2.3.1 CSS和ERB

资产管道自动评估ERB 。 这意味着如果您将一个erb扩展添加到CSS资源(例如, application.css.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' %>) }

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

请注意,结束标记不能是样式 - %>。


只有这个片段不适合我:

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

但将stylename.scss重命名为stylename.css.scss可以帮助我。


在Rails 4中,您可以像这样轻松地引用位于.SCSS文件中assets/images/中的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");

如果你的代码不与其他人共享,那么最好的选择就是做rake db:rollback然后编辑你的列名在迁移和rake db:migrate 。 而已

您可以编写另一个迁移来重命名该列

 def change
    rename_column :table_name, :old_name, :new_name
  end

而已。





ruby-on-rails heroku ruby-on-rails-4