javascript - 如何将资源中的图像附加到 Rails 5 中的 ruby​​ 对象

Question

我正在尝试构建一个国际象棋游戏，目前我已经通过游戏模型初始化了棋子，如下所示:

    class Game < ApplicationRecord
  scope :available, -> { where(white_player_id: nil).or(where(black_player_id: nil))}
  belongs_to :user
  has_many :pieces
  after_create :populate_game


  def populate_game
    #black pieces 

    (0..7).each do |i|
      Pawn.create(game_id: id, x_position: i, y_position: 6, color: "black", status: true, image: 'pwn_blk.png')
    end 

其余部分的构建方式相同，但出于篇幅考虑，我没有包含这些内容。

我的问题是，代表这些碎片的图像给我带来了麻烦。我用 javascript 构建了板子，一次一个正方形，并且我将一个跨度附加到与正确部分相对应的正方形上。我可以让件 id 工作得很好，但是当我尝试引用模型中存储的图像时(无论我使用 span.setAttribute('img', "src=${piece.image}") 还是附加一个单独的子级到跨度，或者完全不同的子级到包含的方 block )我在控制台中收到一条错误消息 GET http://localhost:3030/games/assets/images/pwn_blk.png 404 (Not Found) 因此，就好像应用程序试图从 url 端点访问图像，而不仅仅是从 Assets 文件夹中提取图像。

我对为什么会这样的想法是这样的，我们将这些片段构建为 JSON 端点并通过 ajax 请求检索，如下所示:

function getGamePieces(id) {
     $.ajax({
        url: `/get_pieces/${id}`,
        method: 'get',

     }).then(function (data) {
       let pieces = data; 
       // console.log(pieces);
       pieces.forEach(function (piece) {
        var row = $boardContainer.querySelector(`[data-x="${piece.x_position}"][data-y="${piece.y_position}"]`);


         if (row){
          var image = document.createElement('img');
          image.setAttribute('src', `./assets/images/pwn_blk.png`); 
          var span = document.createElement('span');
          span.className = 'piece';
          span.setAttribute('draggable', 'true')
          span.setAttribute('ondragstart', 'onDragStart(event);')
          span.setAttribute('id', piece.id);
          span.setAttribute('img', `src=${piece.image}`);
          // span.append(piece.image);
          row.appendChild(span);
         }
       })

     })    
}        

现在有点困惑，因为我已经做了很多实验，试图弄清楚如何让它发挥作用，但我的能力还不够。关于如何直接从 Assets 文件夹中提取图像有什么建议吗？

Answer 1

您应该使用image_path来获取资源中图像的路径。 https://api.rubyonrails.org/v5.2.0/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-image_path

然后使用元素上的数据属性来设置图像 URL，以便稍后可以使用 JavaScript 检索它。