chessboard.js 看板图像未在浏览器中显示

chessboard.js board image is not showing up in browser

我正在尝试使用 Flask 构建一个非常简单的网络应用程序来与我的 python 国际象棋引擎下棋。但是,我是 javascript、html 和 css 的新手,我无法在浏览器中显示 chessboard.js 版图。 这是我的 html 主体代码片段(脚本 link 行实际上位于头部部分)。非常简单,还没有输入或任何东西。我只是想让图像显示出来! '''

  <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>

我已经包含了所有必需的脚本 links(或者我相信在阅读了无数教程和文档之后)并且我还拥有所有 css/、js/ 和 img/ 文件夹最新的 chessboard.js 下载在与此 html 文件相同的文件夹中(就像我在教程中读到的一样)。

当您使用 Flask 打开浏览器时,我的浏览器中只显示文本和 "Start Position" 按钮(单击它时无效)。

为什么我的浏览器 (Firefox) 中没有显示棋盘图像?

我是否需要以任何方式修改 img 文件夹或 .js 文件? 我的 HTML 有什么问题吗?还是我需要对 JS 做一些额外的事情?

编辑: 我刚刚意识到我在从 Flask 启动时遇到了这些错误:

"GET /css/chessboard-0.3.0.min.css HTTP/1.1" 404 -

"GET /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)

总而言之,我已经尝试了所有我能想到的方法并为此花费了很多时间,所以非常感谢任何帮助!!

此致,

蒂姆

所以我终于解决了!

原来是三个问题的结合:

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

这解决了我遇到的所有问题。 chessboard.js 现在可以很好地与烧瓶搭配使用,而且看起来超级酷!

此致,蒂姆