rails css scss 使用 asset_path问题

rails css scss 使用 asset_path问题

背景图加载如果想要使用静态资源

CSS 和 ERB

Asset Pipeline 会自动计算 ERB 的值。也就是说,只要给 CSS 文件添加 .erb 扩展名(例如 application.css.erb),就可以在 CSS 规则中使用 asset_path 等辅助方法。

1
.class { background-image: url(<%= asset_path 'image.png' %>) }

上述代码中的 asset_path 辅助方法会返回指向图像真实路径的链接。图像必须位于静态文件加载路径中,例如 app/assets/images/image.png,以便在这里引用。如果在 public/assets 文件夹中已经存在此图像的带指纹的版本,那么将引用这个带指纹的版本。

要想使用 data URI(用于把图像数据直接嵌入 CSS 文件中),可以使用 asset_data_uri 辅助方法

1
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

CSS 和 Sass

在使用 Asset Pipeline 时,静态资源文件的路径都必须重写,为此 sass-rails gem 提供了 -url 和 -path 系列辅助方法(在 Sass 中使用连字符,在 Ruby 中使用下划线),用于处理图像、字体、视频、音频、JavaScript 和 CSS 等类型的静态资源文件。

  • image-url(“rails.png”) 会返回 url(/assets/rails.png)
  • image-path(“rails.png”) 会返回 “/assets/rails.png”

或使用更通用的形式:

  • asset-url(“rails.png”) 返回 url(/assets/rails.png)
  • asset-path(“rails.png”) 返回 “/assets/rails.png”

JavaScript/CoffeeScript 和 ERB

只要给 JavaScript 文件添加 .erb 扩展名(例如 application.js.erb),就可以在 JavaScript 源代码中使用 asset_path 辅助方法:

1
$('#logo').attr({ src: "<%= asset_path('logo.png') %>" });

上述代码中的 asset_path 辅助方法会返回指向图像真实路径的链接。

同样,只要给 CoffeeScript 文件添加 .erb 扩展名(例如 application.coffee.erb),就可以在 CoffeeScript 源代码中使用 asset_path 辅助方法:

1
$('#logo').attr src: "<%= asset_path('logo.png') %>"