将 chessbord.js 与 Flask 集成

Question

我正在使用 Flask，但在使用 chessboard.js 时遇到问题。

我的静态文件夹是这样的：

/static/
    /css/
    /img/
    /js

我将 chessboard.js 文件放在哪里。

我的模板：

{% extends "base_templates/page_base.html" %}  {# base_templates/page_base.html extends base_templates/base.html #}

{% block main %}
<h1>Home page</h1>

<p>This page is accessible to any user.</p>

{% if not current_user.is_authenticated() %}
<p>
To view the Member page, you must
<a href="{{ url_for('user.login') }}">Sign in</a> or
<a href="{{ url_for('user.register') }}">Register</a>.
</p>
{% endif %}

<p>The code:</p>
<p>ChessBoard initializes to an empty board with no second argument.
</p>

<!-- Here the chessboard code: start example HTML --->
<div id="board" style="width: 400px"></div>
<!-- end example HTML --->

<script type="text/javascript" src='/static/js/json3.min.js'></script>
<script type="text/javascript" src='/static/js/jquery.min.js'></script>
<script type="text/javascript" src='/static/js/chessboard.js'></script>
<script>

var init = function() {

//--- start example JS ---
var board = new ChessBoard('board');
//--- end example JS ---

}; // end init()
$(document).ready(init);
</script>
{% endblock %}

javascript 找不到显示板的图像。它试图在 /img/ 而不是 /static/img/ 中找到图像。我该如何解决这个问题？

Answer 1

在chessboard-0.3.0.js 的第 445 行，上面写着

cfg.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png';

如果你把它改成：

cfg.pieceTheme = '/static/img/chesspieces/wikipedia/{piece}.png';

这能解决您的问题吗？您可能必须使用确切的路径来反映您的完整目录结构（或使用相对路径），但这是需要更改的地方。