使用 Rails 3.1 资产管道的 JavaScript 代码中图像的 URL？答案

【问题标题】：URL of images in JavaScript code using Rails 3.1 asset pipeline?使用 Rails 3.1 资产管道的 JavaScript 代码中图像的 URL？
【发布时间】：2011-11-14 21:55:17
【问题描述】：

在 CSS 文件中，您可以使用以下方法获取图像资产（带有指纹）的正确名称：

background-image: url(image-url("rails.png"))

但是你如何从 JavaScript 文件中做同样的事情呢？

【问题讨论】：

你能举个例子在 CSS 和 HTML 中使用这个吗？
你应该使用background-image: image-url("rails.png")。虽然与这个问题无关......

标签： javascript image asset-pipeline rails-3.1

【解决方案1】：

我看到你正在使用 sass 辅助方法。

在标准（非 Sass）CSS 中，你可以这样做：

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

CSS 文件需要将 erb 添加到扩展中：

file_name.css.erb

对于 javascript，同样的规则适用：

file_name.js.erb

在文件中：

var image_path = '<%= asset_path 'image.png' %>'

Rails asset pipeline guide 是有关如何使用这些功能的绝佳信息来源。

【讨论】：

答案，简而言之，就是用erb。

【解决方案2】：

在 Rails 4 中，我建议您不要使用 js.erb 视图，而是坚持使用资产管道，并使用变量将 URL 传递给它，而不是使用 gon 或在以下位置讨论的其他技术：Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file

与gon:

app/views/layouts/application.html.erb：

<head>
  <meta charset="utf-8"/>
  <%= include_gon %>

app/controllers/application_controller.rb:

before_filter { gon.path = asset_path 'image.png' }

app/assets/javascripts/file.js.coffee：

alert gon.path

这种方法更快，因为文件仅在启动时预编译一次，由服务器而不是通过 Rails 提供服务，并且与其余 Js 使用相同的 HTTP 请求。

【讨论】：