ruby on rails 6 - referencing images dynamically in java script

Question

I am trying to implement chessboard.js and chess.js ( https://chessboardjs.com/examples#2030 ) in the ruby on rails 6 framework and have a problem with rendering images of pieces on the chessboards (images of pieces are attached to the libraries in separate files). I added both java scripts libraries using webpacker. I was trying to place the images in various places of the project but neither worked (for example ..\\img\\chesspieces\\wikipedia)

I am able to render single picture separately outside of chessboard but don't know how to reference the images in the java script so that they would be displayed on the chessboard in ruby on rails 6 framework.

How should I build the path to the pictures in the below java script in the ruby on rails 6 framework?

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>

THE Error example: wP.png:1 GET http://localhost:3000/images/wP.png 404 (Not Found)

I was only able to render a single picture by adding to application.js

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

and then by adding to index.html.erb

  <%= image_pack_tag 'bB.png' %>

Answer 1

Try to Change the code

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

to

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