fix default avatar rendering

src/components/NostrAvatar.ts

@@ -2,6 +2,7 @@ import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit-element';
 import { customElement, property } from 'lit/decorators.js';
 type AvatarSize = 'short' | 'medium' | 'large' | 'huge';
+import defaultAvatar from '@/default-avatar.png';
 
 @customElement('arx-nostr-avatar')
 export class ArxNostrAvatar extends LitElement {
@@ -10,31 +11,31 @@ export class ArxNostrAvatar extends LitElement {
 
   static override styles = [
     css`
-    img {
+      img {
-      border-radius: 50%;
+        border-radius: 50%;
-      width: var(--avatar-size);
+        width: var(--avatar-size);
-      height: var(--avatar-size);
+        height: var(--avatar-size);
-    }
+      }
-    .short-avatar {
+      .short-avatar {
-      --avatar-size: 2rem;
+        --avatar-size: 2rem;
-    }
+      }
-    .medium-avatar {
+      .medium-avatar {
-      --avatar-size: 3rem;
+        --avatar-size: 3rem;
-    }
+      }
-    .large-avatar {
+      .large-avatar {
-      --avatar-size: 4rem;
+        --avatar-size: 4rem;
-    }
+      }
-    .huge-avatar {
+      .huge-avatar {
-      --avatar-size: 5rem;
+        --avatar-size: 5rem;
-    }
+      }
-  `,
+    `,
   ];
 
   override render() {
     return html`
       <img
-        class=${this.size}-avatar
+        class="${this.size}-avatar"
-        src=${this.profile.image || '/default-avatar.png'}
+        src=${this.profile.image || defaultAvatar}
         alt=${this.profile.name || this.profile.displayName || ''}
         @error=${this.handleError}
       />
@@ -43,6 +44,6 @@ export class ArxNostrAvatar extends LitElement {
 
   handleError(event: Event) {
     event.preventDefault();
-    (event.target as HTMLImageElement).src = '/default-avatar.png';
+    (event.target as HTMLImageElement).src = defaultAvatar;
   }
 }