ruby on rails 6 - 在javascript中动态引用图像

Posted 2023-02-15

【中文标题】ruby on rails 6 - 在javascript中动态引用图像

【英文标题】：ruby on rails 6 - referencing images dynamically in java script

【发布时间】：2021-12-14 04:00:33

【问题描述】：

我正在尝试在 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脚本中图片的路径？（行：return'img/chesspieces/wikipedia/'+piece+'. png'在下面的代码中）

我的 index.html.erb 文件：

<div id="board1" style="width: 400px"></div>
   
  <script> 
  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/wikipedia/" + piece + '.png'
    

  var config = 
    pieceTheme: pieceTheme,
    position: 'start'
  
  var board1 = Chessboard('board1', config) 
  
  </script>
    

错误示例：wP.png:1 GET http://localhost:3000/img/chesspieces/wikipedia/bQ.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' %>

更新： 如果我从https://chessboardjs.com/img/chesspieces/wikipedia/ 获取图像，它工作正常，但我认为这不是引用这些图片的正确方法。我想从项目文件中引用它们。

return "https://chessboardjs.com/img/chesspieces/wikipedia/" + piece + '.png'

【参考方案1】：

尝试更改代码

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

到

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

【讨论】：

我尝试了建议的更改，但它并没有解决我的问题。我仍然无法显示图片。