After following what the documentation says on chessboardjs.com using the unpkg CDN, the chessboard appears without the pieces. I’m assuming that this is because the library scripts don’t know how to find the images, but I don’t know how to reconcile this. Here is my code.
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Chess</title>
<link rel="stylesheet" href="../styles/game.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet"
href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css"
integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU"
crossorigin="anonymous">
</head>
<body>
<div id="board1"></div>
<div class="buttons">
<a href="lobby.html"><button class="button">Exit</button></a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"
integrity="sha384-8Vi8VHwn3vjQ9eUHUxex3JSN/NFqUg3QbPyX8kWyb93+8AC/pPWTzj+nHtbC5bxD"
crossorigin="anonymous"></script>
<script src="../scripts/chess.js"></script>
</body>
</html>
javascript file
var config = {
pieceTheme: '/img/chesspieces/wikipedia/{piece}.png',
position: 'start'
}
var board1 = Chessboard('board1', config);
As you can see, I tried downloading the image files locally, but even this didn’t seem to resolve the issue.