Ruby on Rails 6中JavaScript动态引用chessboard.js棋子图片的路径配置

前置准备 #

• 将所有棋子图片完整存放在 app/javascript/images/chesspieces/wikipedia/ 目录下，确认所有棋子png文件存在
• 调整你的 app/javascript/packs/application.js 代码，将路径生成方法暴露为全局可调用：

// 你原有已添加的代码
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
// 新增代码：将方法挂载到window对象，让页面内联JS可以调用
window.imagePath = imagePath

路径修改方案 #

直接修改index.html.erb中的pieceTheme函数逻辑即可：

function pieceTheme (piece) {
  // 自动匹配webpacker打包后带哈希后缀的真实图片路径
  return imagePath(`chesspieces/wikipedia/${piece}.png`)
}

替代方案（使用Rails原生Asset Pipeline） #

如果你更习惯用Rails自带的静态资源管理逻辑，可以用以下方法：

• 将棋子图片放在 app/assets/images/chesspieces/wikipedia/ 目录下
• 直接通过ERB插值拼接资源路径：

function pieceTheme (piece) {
  return "<%= asset_path('chesspieces/wikipedia/') %>" + piece + '.png'
}

原理说明 #

Rails6默认的Webpacker打包静态资源时，会给图片文件名添加唯一哈希后缀用于缓存控制，直接写静态相对路径无法匹配到打包后的真实文件地址，通过require.context生成的imagePath方法会自动映射到正确的打包后资源路径。

内容的提问来源于stack exchange，提问作者emzet