Static files such as images and stylesheets can be placed in assets/ folder of the project. These files can be referenced within your app.
There are two ways to reference assets in your Reflex app:
To reference an image in the assets/ folder, pass the relative path as a prop.
For example, you can store your logo in your assets folder:
Then you can display it using a rx.image component:
Always prefix the asset path with a forward slash / to reference the asset from the root of the project, or it may not display correctly on non-root pages.
The rx.asset function provides a more flexible way to reference assets in your app. It supports both local assets (in the app's assets/ directory) and shared assets (placed next to your Python files).
Local assets are stored in the app's assets/ directory and are referenced using rx.asset:
Shared assets are placed next to your Python file and are linked to the app's external assets directory. This is useful for creating reusable components with their own assets:
You can also specify a subfolder for shared assets:
The favicon is the small icon that appears in the browser tab.
You can add a favicon.ico file to the assets/ folder to change the favicon.