Assets

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:

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.