diff --git a/src/components/NostrAvatar.ts b/src/components/NostrAvatar.ts index ae8aa53..63b4295 100644 --- a/src/components/NostrAvatar.ts +++ b/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 { - border-radius: 50%; - width: var(--avatar-size); - height: var(--avatar-size); - } - .short-avatar { - --avatar-size: 2rem; - } - .medium-avatar { - --avatar-size: 3rem; - } - .large-avatar { - --avatar-size: 4rem; - } - .huge-avatar { - --avatar-size: 5rem; - } - `, + img { + border-radius: 50%; + width: var(--avatar-size); + height: var(--avatar-size); + } + .short-avatar { + --avatar-size: 2rem; + } + .medium-avatar { + --avatar-size: 3rem; + } + .large-avatar { + --avatar-size: 4rem; + } + .huge-avatar { + --avatar-size: 5rem; + } + `, ]; override render() { return html` ${this.profile.name @@ -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; } } diff --git a/src/default-avatar.png b/src/default-avatar.png new file mode 100644 index 0000000..02e81ef Binary files /dev/null and b/src/default-avatar.png differ