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)