浏览器中没有显示chessboard.js板图像

Question

我正在尝试建立一个非常简单的webapp与瓶，以玩国际象棋与我的巨蟒国际象棋引擎。但是，我对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文件相同的文件夹中(就像我在教程中看到的那样)。

当你用烧瓶打开它的时候，我的浏览器中显示的只有文本和“开始位置”按钮(点击它时没有效果)。

为什么棋盘图像没有出现在我的浏览器(Firefox)中？

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

编辑:我刚刚意识到，当我从烧瓶启动时，我正在收到这些错误：

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

"GET /js/chessboard-0.3.0.min.jsHTTP/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

所以我终于解决了！

它被证明是三个问题的组合：

<script src="{{ url_for('static', filename='js/chessboard-1.0.0.js') }}"></script>

• after

• 权限问题--确保将所有js和css文件的权限设置为使用chmod 755

• html和烧瓶集成问题来执行:与我所做的加载脚本不同，烧瓶显然希望将所有的css和js文件放在/static目录中并像这样导入：I修复了所有这些，棋盘内的小块图像没有显示出来。Yu必须导航到棋盘-1.0.0.js文件，并将第579行从config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png'更改为config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png'

这解决了我所有的问题。chessboard.js现在和烧瓶一起工作很好，看起来超级酷！

向你问好，提姆