Я создаю шахматное веб-приложение, используя Spring Boot и Thymeleaf в качестве личного проекта для проверки своих навыков. Я использую библиотеку, Шахматная доска. js, чтобы сделать шахматную доску для меня. Загруженный zip-файл поставляется со всеми javascript и изображениями, а что нет, и вы просто добавляете файлы в свой проект и загружаете js на страницу html.
Проблема в том, что когда шахматная доска . js пытается загрузить файлы pgn по пути img/chesspieces/wikipedia/{piece}.png
. Spring будет добавлять путь к localhost: 8080 как localhost:8080/img/chesspieces/wikipedia/{piece}.png
вместо получения папки images. Вот снимок экрана окна инструментов разработчика в браузере.
Я абсолютно не знаю, как настроить что-то подобное, хотя это и возможно, так как загрузка изображений, хранящихся в папке проекта, довольно стандартная вещь. В любом случае, здесь мой код с первым блоком javascript:
function expandConfig (config) {
// default for orientation is white
if (config.orientation !== 'black') config.orientation = 'white'
// default for showNotation is true
if (config.showNotation !== false) config.showNotation = true
// default for draggable is false
if (config.draggable !== true) config.draggable = false
// default for dropOffBoard is 'snapback'
if (config.dropOffBoard !== 'trash') config.dropOffBoard = 'snapback'
// default for sparePieces is false
if (config.sparePieces !== true) config.sparePieces = false
// draggable must be true if sparePieces is enabled
if (config.sparePieces) config.draggable = true
// HERE IS THE PROBLEMATIC CODE!!
if (!config.hasOwnProperty('pieceTheme') ||
(!isString(config.pieceTheme) && !isFunction(config.pieceTheme))) {
config.pieceTheme = 'img/chesspieces/wikipedia/{piece}.png'
}
// animation speeds
if (!validAnimationSpeed(config.appearSpeed)) config.appearSpeed = DEFAULT_APPEAR_SPEED
if (!validAnimationSpeed(config.moveSpeed)) config.moveSpeed = DEFAULT_MOVE_SPEED
if (!validAnimationSpeed(config.snapbackSpeed)) config.snapbackSpeed = DEFAULT_SNAPBACK_SPEED
if (!validAnimationSpeed(config.snapSpeed)) config.snapSpeed = DEFAULT_SNAP_SPEED
if (!validAnimationSpeed(config.trashSpeed)) config.trashSpeed = DEFAULT_TRASH_SPEED
// throttle rate
if (!validThrottleRate(config.dragThrottleRate)) config.dragThrottleRate = DEFAULT_DRAG_THROTTLE_RATE
return config
}
Структура проекта: (Я знаю, что это не говорит, но мой HTML Файл находится в «каталоге src / resources / templates».
C:.
├───.idea
│ ├───codeStyles
│ └───libraries
├───.mvn
│ └───wrapper
├───src
│ ├───main
│ │ ├───java
│ │ │ └───com
│ │ │ └───chessapp
│ │ │ └───chess
│ │ │ └───controller
│ │ └───resources
│ │ ├───static
│ │ │ └───javascript
│ │ │ └───chessboardjs
│ │ │ ├───css
│ │ │ ├───img
│ │ │ │ └───chesspieces
│ │ │ │ └───wikipedia
│ │ │ └───js
│ │ └───templates
│ └───test
│ └───java
│ └───com
│ └───chessapp
│ └───chess
└───target
и HTML
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/css/test.css}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script th:src="@{/javascript/chessboardjs/js/chessboard-1.0.0.min.js}"></script>
<!-- <script src="/static/javascript/chessboard-init.js"></script>-->
</head>
<body>
<h1>Hello World!</h1>
<div id="board1" style="width: 400px"></div>
</body>
<script>
var board1 = ChessBoard('board1', 'start')
</script>
</html>
Спасибо за помощь!