Javascript 将chessbord.js与Flask集成
我正在使用Flask,但使用起来有问题 我的静态文件夹如下所示:Javascript 将chessbord.js与Flask集成,javascript,python,flask,chessboard.js,Javascript,Python,Flask,Chessboard.js,我正在使用Flask,但使用起来有问题 我的静态文件夹如下所示: /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 p
/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 %}
{%extends“base_templates/page_base.html”%}{{#base_templates/page_base.html extends base_templates/base.html}
{%block main%}
主页
任何用户都可以访问此页面
{%如果不是当前\u用户。是否\u已验证()%}
要查看成员页面,您必须
或
.
{%endif%}
守则:
棋盘初始化为没有第二个参数的空棋盘。
var init=函数(){
//---开始示例JS---
var board=新棋盘(“棋盘”);
//---结束示例JS---
}; // end init()
$(文件).ready(初始化);
{%endblock%}
javascript找不到显示板的图像。它尝试在/img/处查找图像,而不是在/static/img/处。如何解决这个问题?在chessboard-0.3.0.js的第445行,上面写着
cfg.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png';
如果将其更改为:
cfg.pieceTheme = '/static/img/chesspieces/wikipedia/{piece}.png';
这能解决你的问题吗?您可能需要使用准确的路径来反映完整的目录结构(或使用相对路径),但这是需要更改的地方。谢谢@JasonBrooks!已修复。如果不起作用,请记住清除缓存,因为浏览器可能会保留不变的行:)。