import logoPngUrl from '../assets/logo.png';
export class TemplateComponent extends ComponentReference {
logoPngUrl = logoPngUrl;
// ...
src/login/template/template.component.html
<img
[src]="logoPngUrl"
alt="logo"
width="500"
/>
Result:
Optional: Updating the logo without re-building the theme
Some pepoles want to be able to "hot swipe" the asset in the Keycloak file system without having to re-build the theme and re-deploy it.
To ensure that the assets are located in a predictible location you would use the public/ directory.
Move the file to public/img/logo.png.
Then make an absolute import from your component:
It's important that you do not simply harcode src="/img/logo.png", or keycloakify won't be able to patch the URL for Keycloak. Use Vite's builtin import.meta.env.BASE_URL.
Doing this is a good practice in any Vite project (not specially Keycloakify) since it ensure the correctness of your URLs even if you customize the base parameter in the your vite.config.ts. Hard coding "/img/logo.png" only works when base is "/" (which is the default)
It's important that you do not simply harcode src="/img/logo.png", or keycloakify won't be able to patch the URL for Keycloak. Use Vite's builtin import.meta.env.BASE_URL.
Doing this is a good practice in any Vite project (not specially Keycloakify) since it ensure the correctness of your URLs even if you customize the "base" parameter in the your vite.config.ts. Writing "/img/logo.png" only works when base is "/" (which is the default)
src/login/template/template.component.ts
export class TemplateComponent extends ComponentReference {
BASE_URL = import.meta.env.BASE_URL;