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 现在可以很好地与烧瓶搭配使用,而且看起来超级酷!
此致,蒂姆
我正在尝试使用 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 现在可以很好地与烧瓶搭配使用,而且看起来超级酷!
此致,蒂姆