The components.html on chessboardjs

Summary

components.html() does not work when using chessboardjs.

Steps to reproduce

Code snippet:

app.py

import streamlit.components.v1 as components

components.html(
"""
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>

<div id="board" style="width: 300px"></div>

<script>
    var board = ChessBoard('board', 'start');
</script>
""", height=300)

streamlit run app.py

Expected behavior:

Should render the board.

Actual behavior:

No board is shown.

Debug info

  • Streamlit version: 1.16.0
  • Python version: 3.10
  • Using venv from python -m venv venv
  • OS version: windows 10
  • Browser version: Google Chrome Version 108.0.5359.125 (Official Build) (64-bit)

Requirements file

streamlit>=1.16.0

Links

Other reference

https://chessboardjs.com/

Additional information

It did not work locally and cloud.

An example board.html works. This file is in the repository

There are also css, js and img folders in the repository.

Hey @ferdy,

You can refer to Restrict Download of Images & Videos on Streamlit App - #2 by andfanilo

Unfortunately, until Streamlit designs a new way to load static assets, Streamlit doesnโ€™t actually load your js/chessboard-1.0.0.min.js from the root of your project, it loads them from its own installation folder so this is where youโ€™ll need to copy your html/css/js assets.

Have a nice day!
Fanilo

Thanks a lot, I will try it.

It worked.

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.