Demo how to import image in React

2 files changed, 2 insertions, 0 deletions

diff --git a/src/keycloak-theme/login/Template.tsx b/src/keycloak-theme/login/Template.tsx
index 181928d..3a97c84 100644
--- a/src/keycloak-theme/login/Template.tsx
+++ b/src/keycloak-theme/login/Template.tsx
@@ -8,6 +8,7 @@ import { type TemplateProps } from "keycloakify/login/TemplateProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "./kcContext";
 import type { I18n } from "./i18n";
+import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
@@ -59,6 +60,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     style={{ "fontFamily": '"Work Sans"' }}
                 >
                     {msg("loginTitleHtml", realm.displayNameHtml)}!!!
+                    <img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
                 </div>
             </div>
 
diff --git a/src/keycloak-theme/login/assets/keycloakify-logo.png b/src/keycloak-theme/login/assets/keycloakify-logo.png
new file mode 100644
index 0000000..b9d103c
--- /dev/null
+++ b/src/keycloak-theme/login/assets/keycloakify-logo.png