diff --git a/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts b/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts index c72988254..fbbb64795 100644 --- a/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts +++ b/packages/leavittbook/src/demos/profile-picture/profile-picture-playground.ts @@ -71,6 +71,11 @@ export class ProfilePicturePlayground extends LitElement { + +

Filename fallback

+
+ +
`; } } diff --git a/packages/web/leavitt/profile-picture/profile-picture.ts b/packages/web/leavitt/profile-picture/profile-picture.ts index 910e65ab0..2a37f2c62 100644 --- a/packages/web/leavitt/profile-picture/profile-picture.ts +++ b/packages/web/leavitt/profile-picture/profile-picture.ts @@ -1,4 +1,5 @@ -import { isDevelopment } from '../../titanium/helpers/helpers'; +import { DOMEvent } from '@leavittsoftware/web/titanium/types/dom-event'; +import { isDevelopment } from '../../titanium/helpers/helpers'; import { css, html, LitElement, PropertyValues } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @@ -41,6 +42,7 @@ export class ProfilePicture extends LitElement { @property({ type: Boolean }) accessor useIntrinsicImageSize: boolean = false; #availableSizes = new Set([32, 64, 128, 256, 512, 1024]); + #fallbackSrc = 'https://cdn.leavitt.com/icon-user-profile-sq.svg'; protected updated(changedProps: PropertyValues) { if (changedProps.has('size') || changedProps.has('useIntrinsicImageSize')) { @@ -64,7 +66,7 @@ export class ProfilePicture extends LitElement { const requestedSize = this.#determineSize(size); if (!cdnFileName) { - return 'https://cdn.leavitt.com/icon-user-profile-sq.svg'; + return this.#fallbackSrc; } else { return `https://cdn.leavitt.com/${cdnFileName}-${requestedSize}.webp`; } @@ -135,12 +137,24 @@ export class ProfilePicture extends LitElement { `; renderProfilePicture() { - return html` User profile picture `; + return html` + User profile picture) => { + if (e.target.src !== this.#fallbackSrc) { + e.target.src = this.#fallbackSrc; + } + }} + /> + `; } render() { if (this.profilePictureLinkPersonId) { - return html`${this.renderProfilePicture()} `; }