ruby on rails 6 - 在java腳本中動態引用圖像

Question

我正在嘗試在 ruby​​ on rails 6 框架中實現 chessboard.js 和 chess.js ( https://chessboardjs.com/examples#2030 ) 並且在棋盤上呈現棋子的圖像時遇到問題（附上棋子的圖像到單獨文件中的庫）。 我使用 webpacker 添加了兩個 java 腳本庫。 我試圖將圖像放在項目的各個地方，但都沒有奏效（例如 ..\\img\\chesspieces\\wikipedia）

我能夠在棋盤之外單獨渲染單個圖片，但不知道如何在 java 腳本中引用圖像，以便它們可以在 ruby​​ on rails 6 框架中顯示在棋盤上。

我應該如何在 ruby​​ on rails 6 框架中構建以下 java 腳本中圖片的路徑？

JAVASCRIPT
    function pieceTheme (piece) {
      // wikipedia theme for white pieces
      if (piece.search(/w/) !== -1) {
        return 'img/chesspieces/wikipedia/' + piece + '.png'
      }
    
      // alpha theme for black pieces
      return 'img/chesspieces/alpha/' + piece + '.png'
    }
    
    var config = {
      pieceTheme: pieceTheme,
      position: 'start'
    }
    var board = Chessboard('myBoard', config)

HTML
    <div id="myBoard" style="width: 400px"></div>

錯誤示例：wP.png:1 GET http://localhost:3000/images/wP.png 404（未找到）

我只能通過添加到 application.js 來渲染一張圖片

// import all image files in a folder:
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

然后通過添加到 index.html.erb

  <%= image_pack_tag 'bB.png' %>

Answer 1

嘗試更改代碼

const images = require.context('../images', true)

到

const images = require.context('./images', true)