javascript - 如何在 javascript 中使用带有 rails asset_path 的动态值？

Question

基于Acquire Asset Path from JavaScript我试图捕获图像的 src:

var icon = "1d0"
// ...
// some logic to get the right icon
// ...
var $icon = $("<img />", {
  class: "day-check-icon",
  src: "<%= asset_path('" + icon + ".png') %>"
})

显然，它不会起作用，但它给出了我想要实现的目标的想法。

---

假设图像的(图像)名称存储在 JavaScript 变量中，我如何使用指向我的 app/assets/images/ 的 src 动态渲染图像？

Answer 1

正如您自己所说，您的示例显然行不通。在我们进入解决方案之前，让我简要介绍一下原因。

问题很简单，服务器在将文件发送给客户端之前解析.erb 文件的所有ERB 代码。这意味着客户端永远不会看到 ERB 代码，也无法与之交互。您可以使用 ERB 代码补充您的 .js 或 .coffee 文件，但反之则不行。您遇到的另一个问题与 Assets 消化有关(默认情况下会返回)。服务器知道这些摘要文件路径，但客户端不知道，除非服务器提供信息。

外部资源也是如此(openweatherapi)，他们也不知道 Assets 的消化是什么。因此，当通过客户端的 JavaScript 与外部资源交互时，您需要某种方式将外部资源返回的 Assets 路径转换为摘要 Assets 路径。

最简单的解决方案是 turning digestions off , 但你可以阅读 here为什么它们通常应该打开。

#1 预先提供资源路径

假设您知道外部 API 总是请求特定 Assets 。也许您将 API 的图像托管在您自己的 Rails 服务器上，因此您不依赖其他服务器(用于 Assets )。假设您将图像存储在 vendor/assets/images/openweatherapi 目录中，因为它们是第三方的。使用以下 JavaScript，您将为客户端提供一个字典，以将普通 Assets 名称转换为摘要 Assets 名称。

<% # lib/assets/javascripts/openweatherapi_assets.js.erb %>

<% # create a global variable assets if it doesn't exist already %>
var assets = assets || {};
assets.openweatherapi = assets.openweatherapi || {};

<% # go to path vendor/assets/images/openweather/* select all children that %>
<% # are a file and loop through each of them %>
<% Dir['vendor/assets/images/openweatherapi/*'].select(&File.method(:file?)).each do |path| %>
  <% # the asset path doesn't include the (app|lib|vendor)/assets/images/ part %>
  <% asset_path = path.sub('vendor/assets/images/', '') %>
  <% file_name = File.basename(path) %>

<% # create the dictionary %>
assets.openweatherapi['<%= file_name %>'] = '<%= asset_path(asset_path) %>';

<% end %>

不要忘记将您的 JavaScript 文件包含在 application.js 中，最好是在包含 app JavaScript 文件之前，这样您就可以从一开始就使用该变量。现在要从您的 JavaScript 中获取摘要 Assets 路径，只需在字典中搜索路径即可。

var icon = "1d0.png";
var $icon = $("<img />", {
  class: "day-check-icon",
  src: assets.openweatherapi[icon],
});

#2 进行 AJAX 调用以获取 Assets 路径

其他选项是在 AJAX 调用中将 Assets 名称发送到服务器，让服务器为您提供正确的摘要 Assets 路径。通过执行以下操作非常简单:

# config/routes.rb
Rails.application.routes.draw do
  resources :assets, only: :index
end

# app/controllers/assets_controller.rb
class AssetsController < ApplicationController
  def index
    @name = params.require(:name)
  end
end

# app/views/assets/index.json.jbuilder
json.name @name
json.path asset_path(@name)

<% # app/assets/javascripts/assets.js.erb %>
<% routes = Rails.application.routes.url_helpers %>
function getAsset(name) {
  return Promise.resolve($.getJSON('<%= routes.assets_path %>', {name: name}));
}

再次确保该文件包含在 application.js 中，最好在任何依赖于 getAsset 函数的文件之前。然后您可以执行以下操作:

var icon = "1d0.png";
getAsset(icon).then(icon => {
  var $icon = $("<img />", {
    class: "day-check-icon",
    src: icon.path,
  });
});

请记住，您可以进一步优化 AJAX 方法，允许您通过单个请求获取多个图标路径。但这应该给你一般的想法。另请记住，AJAX 调用会增加额外的嵌套和延迟，这可以通过第一种方法避免。