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` `;
+ return html`
+ ) => {
+ if (e.target.src !== this.#fallbackSrc) {
+ e.target.src = this.#fallbackSrc;
+ }
+ }}
+ />
+ `;
}
render() {
if (this.profilePictureLinkPersonId) {
- return html`${this.renderProfilePicture()} `;
}