chessboard.js 棋盘图像未显示在浏览器中

Question

我正在尝试使用 Flask 构建一个非常简单的 Web 应用程序，以便与我的 Python 国际象棋引擎下棋。但是，我对 javascript、html 和 css 很陌生，无法让 chessboard.js 棋盘图像显示在我的浏览器中。这是我的 html 正文代码片段（脚本链接行实际上位于 head 部分）。非常简单，还没有输入或任何东西。我只是想让图像显示出来！'''

  <link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/chessboard-0.3.0.min.js"></script>
  <div id="board"></div>
  <button id="startBtn">Start Position</button>
  <script>
      var board = Chessboard('board', 'start')
      $('#startBtn').on('click', board.start)          
  </script>

我已经包含了所有必需的脚本链接（至少在阅读了无数教程和文档后我相信如此），并且我还将最新的 chessboard.js 下载中的所有 css/、js/ 和 img/ 文件夹与此 html 文件放在同一文件夹中（就像我在教程中读到的那样）。

当您使用 Flask 打开浏览器时，显示在我的浏览器中的只是文本和“开始位置”按钮（单击它时没有任何效果）。

为什么棋盘图像没有显示在我的浏览器（Firefox）中？

我是否需要以任何方式修改 img 文件夹或可能的 .js 文件？我的 HTML 是否有问题，或者我需要对 JS 做一些额外的事情吗？

编辑：我刚刚意识到从 Flask 启动时出现这些错误：

“获取/css/chessboard-0.3.0.min.css HTTP/1.1”404 -

“获取/js/chessboard-0.3.0.min.js HTTP/1.1”404-

然而，当我在浏览器中打开 HTML 文件时，它工作得很好（在我修复了一些权限问题之后）并且板图像显示出来。这似乎是 Flask 实现的问题，所以这是我的代码

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('home.html')

@app.route("/chessgame")
def chessgame():
    return render_template('chessgame.html')


if __name__ == "__main__":
    app.run(debug = True)

总而言之，我已经尝试了我能想到的一切，并为此花费了很多时间，因此非常感谢任何帮助！

此致，

蒂姆

Answer 1

所以我终于解决了！

事实证明这是三个问题的结合：

• 权限问题 - 确保使用 chmod 755 将所有 js 和 css 文件的权限设置为可执行
• html 和 Flask 集成问题：flask 显然希望将所有 css 和 js 文件放在 /static 目录中并像这样导入，而不是像我那样加载脚本： <script src="{{ url_for('static', filename='js/chessboard-1.0.0.js') }}"></script>
• 当我修复所有这些后，棋盘内的小棋子图像没有显示。Yu 必须导航到 chessboard-1.0.0.js 文件并将第 579 行从 更改config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png'为config.pieceTheme = 'static/img/chesspieces/wikipedia/{piece}.png'

这解决了我遇到的所有问题。chessboard.js 现在可以与 Flask 配合使用，而且看起来超级酷！

最好的问候，蒂姆