将chessbord.js与Flask集成 [英] Integrate chessbord.js with Flask
问题描述
我正在使用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>主页< H1>
< p>任何使用者均可使用此页面。< / p>
{%if not current_user.is_authenticated()%}
< p>
要查看会员页面,您必须
< a href ={{url_for('user.login')}}>登入< / a>或
< a href ={{url_for('user.register')}}>注册< / a> ;.
< / p>
{%endif%}
< p>代码:< / p>
棋盘初始化为空白板,没有第二个参数。
< / p>
<! - 这里的棋盘代码:start example HTML --->
< div id =boardstyle =width:400px>< / div>
<! - end example HTML --->
< script type =text / javascriptsrc ='/ static / js / json3.min.js'>< / script>
< script type =text / javascriptsrc ='/ static / js / jquery.min.js'>< / script>
< script type =text / javascriptsrc ='/ static / js / chessboard.js'>< / script>
< script>
var init = function(){
// ---开始示例JS ---
var board = new ChessBoard('board');
// ---结束示例JS ---
}; // end init()
$(document).ready(init);
< / script>
{%endblock%}
javascript找不到图片。它试图在/ img /不在/ static / img /上找到图像。如何解决这个问题?
在 如果您将其更改为: 能解决您的问题吗?你可能不得不使用确切的路径来反映你完整的目录结构(或使用相对路径),但这是需要改变的地方。 I'm working with Flask and I'm having problems using chessboard.js with it. My static folder is something like this: where I put the files for chessboard.js. My template: The javascript can't find the images to show the board. It tries to find the images at /img/ not at /static/img/. How can I fix this? On line 445 of If you change it to: does that fix your problem? You might have to play around with the exact path to reflect your complete directory structure (or use a relative path) but this is the place where it needs to be changed. 这篇关于将chessbord.js与Flask集成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! chessboard-0.3.0.js
,它说
$ b $ pre code cfg.pieceTheme ='img / chesspieces / wikipedia / {piece} .png';
cfg.pieceTheme ='/static/img/chesspieces/wikipedia/{piece}.png';
/static/
/css/
/img/
/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 %}
chessboard-0.3.0.js
, it sayscfg.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png';
cfg.pieceTheme = '/static/img/chesspieces/wikipedia/{piece}.png';