Show how to import from public/

src/keycloak-theme/login/Template.tsx

@@ -9,6 +9,7 @@ import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
 import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png";
+import { PUBLIC_URL } from "../../PUBLIC_URL";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -59,7 +60,13 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     className={getClassName("kcHeaderWrapperClass")}
                     style={{ "fontFamily": '"Work Sans"' }}
                 >
+                    {/* 
+                        This is just to show you how it can be done but this is not the best option for importing assets.
+                        See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets
+                    */}
+                    <img src={`${PUBLIC_URL}/keycloakify-logo.png`} alt="Keycloakify logo" width={50} />
                     {msg("loginTitleHtml", realm.displayNameHtml)}!!!
+                    {/* This is the preferred way to use assets */}
                     <img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
                 </div>
             </div>