chessboard. js изображение доски не отображается в браузере

Question

Я пытаюсь создать очень простое веб-приложение с Flask, чтобы играть в шахматы против моих python шахматных движков. Тем не менее, я новичок в javascript, html и css и не могу получить изображение шахматной доски. js для отображения в моем браузере. Вот мой html фрагмент кода тела (строки ссылок сценария фактически находятся в разделе head). Очень просто, без ввода или чего-либо еще. Я просто хочу, чтобы изображение появилось! '' '

  <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>

Я включил все необходимые ссылки на скрипты (или, как я считаю, после прочтения бесчисленных руководств и документации), а также у меня есть все css /, js / и img / папки с последней шахматной доски. js скачать в той же папке, что и этот html файл (как я читал в учебнике).

Все, что отображается в моем браузере, когда вы открываете его с помощью Flask - это текст и кнопка «Начальная позиция» (не действуют при нажатии на нее).

Почему изображение шахматной доски не отображается в моем браузере (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)

Подводя итог, я перепробовал все, что мог придумать, и потратил много часов на это , поэтому любая помощь очень ценится!

С уважением,

Тим

Answer 1

Так что я наконец-то решил это!

Оказалось, что это комбинация трех проблем:

• Проблема с разрешением - убедитесь, что для всех файлов js и css установлено разрешение на выполнение с помощью chmod 755
• html и flask проблема интеграции: вместо загрузки скриптов, как я сделал, flask явно хочет, чтобы все css и js файлы в каталоге / stati c и импортировались как это: <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'

Это устранило все проблемы, которые у меня были. Шахматная доска. js теперь отлично работает с flask и выглядит очень круто!

С уважением, Тим