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

发布于 2024-12-04 10:16:12 字数 152 浏览 0 评论 0原文

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

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

但是如何从 JavaScript 文件中执行相同操作？

原文

In CSS files, you can get the proper name of an image asset (with the fingerprint) by using:

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

but how do you do the same from a JavaScript file?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拍不死你 2024-12-11 10:16:12

我看到你正在使用 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 资产管道指南是一个关于如何使用这些功能的优秀信息来源。

回复收藏 0 原文

甜尕妞 2024-12-11 10:16:12

在 Rails 4 中，我建议您不要使用 js.erb 视图，而是坚持使用资产管道，并使用变量将 URL 传递给它，而不是使用 gon 或在以下位置讨论的其他技术：Ruby on Rails - 将 JavaScript 变量从控制器发送到外部 Javascript资产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 提供服务，并且与 J 的其余部分在相同的 HTTP 请求上。

In Rails 4, instead of using a js.erb view I recommend that you stick to the asset pipeline, and pass the URL to it with a variable instead using gon or some other technique discussed at: Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file

With 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

This method is faster because file is precompiled only once at startup, gets served by the server instead of through Rails, and on the same HTTP request as the rest of the Js.

回复收藏 0 原文

~没有更多了~