Feature/fallback image

src/core/dom-renderer/domRenderer.ts

@@ -35,7 +35,7 @@
 } from './domRendererUtils.js';
 
 // Feature detection for legacy brousers
 const _styleRef: any =
   typeof document !== 'undefined' ? document.documentElement?.style || {} : {};
 
 const supportsObjectFit: boolean = 'objectFit' in _styleRef;
@@ -109,7 +109,7 @@
     for (const prop in task.propsEnd) {
       const start = task.propsStart[prop]!;
       const end = task.propsEnd[prop]!;
       (task.node.props as any)[prop] = interpolateProp(prop, start, end, t);
     }
 
     updateNodeStyles(task.node);
@@ -134,7 +134,7 @@
 
   constructor(
     public node: DOMNode,
     props: Partial<lng.INodeAnimateProps<any>>,
     rawSettings: Partial<lng.AnimationSettings>,
   ) {
     this.settings = {
@@ -152,7 +152,7 @@
 
     for (const [prop, value] of Object.entries(props)) {
       if (value != null && typeof value === 'number') {
         this.propsStart[prop] = (node.props as any)[prop];
         this.propsEnd[prop] = value;
       }
     }
@@ -214,7 +214,7 @@
 
 function animate(
   this: DOMNode,
   props: Partial<lng.INodeAnimateProps<any>>,
   settings: Partial<lng.AnimationSettings>,
 ): lng.IAnimationController {
   return new AnimationController(this, props, settings);
@@ -857,16 +857,29 @@
 
           node.imgEl.addEventListener('error', () => {
             node.imageLoading = false;
+
+            const failedSrc =
+              node.imgEl?.dataset.pendingSrc || node.lazyImagePendingSrc || '';
+
+            const fallback = node.props.fallbackImage;
+            if (
+              fallback &&
+              node.imgEl &&
+              node.imgEl.dataset.rawSrc !== fallback
+            ) {
+              node.imgEl.dataset.pendingSrc = fallback;
+              node.imgEl.dataset.rawSrc = fallback;
+              node.imgEl.src = fallback;
+              return;
+            }
+
             node.showBackgroundLayer();
             if (node.imgEl) {
               node.imgEl.removeAttribute('src');
               node.imgEl.style.display = 'none';
               node.imgEl.removeAttribute('data-rawSrc');
             }
 
-            const failedSrc =
-              node.imgEl?.dataset.pendingSrc || node.lazyImagePendingSrc || '';
-
             const payload: lng.NodeTextureFailedPayload = {
               type: 'texture',
               error: new Error(`Failed to load image: ${failedSrc}`),
@@ -977,15 +990,28 @@
 
         node.imgEl.addEventListener('error', () => {
           node.imageLoading = false;
+
+          const failedSrc =
+            node.imgEl?.dataset.pendingSrc || node.lazyImagePendingSrc || '';
+
+          const fallback = node.props.fallbackImage;
+          if (
+            fallback &&
+            node.imgEl &&
+            node.imgEl.dataset.rawSrc !== fallback
+          ) {
+            node.imgEl.dataset.pendingSrc = fallback;
+            node.imgEl.dataset.rawSrc = fallback;
+            node.imgEl.src = fallback;
+            return;
+          }
+
           if (node.imgEl) {
             node.imgEl.removeAttribute('src');
             node.imgEl.style.display = 'none';
             node.imgEl.removeAttribute('data-rawSrc');
           }
 
-          const failedSrc =
-            node.imgEl?.dataset.pendingSrc || node.lazyImagePendingSrc || '';
-
           const payload: lng.NodeTextureFailedPayload = {
             type: 'texture',
             error: new Error(`Failed to load image: ${failedSrc}`),
@@ -1285,6 +1311,7 @@
     rotation: props.rotation ?? 0,
     rtt: props.rtt ?? false,
     placeholderColor: props.placeholderColor ?? 0,
+    fallbackImage: props.fallbackImage ?? null,
     data: {},
     imageType: props.imageType,
   };
@@ -1829,6 +1856,15 @@
     updateNodeStyles(this);
   }
 
+  get fallbackImage(): string | null {
+    return this.props.fallbackImage ?? null;
+  }
+
+  set fallbackImage(v: string | null) {
+    if (this.props.fallbackImage === v) return;
+    this.props.fallbackImage = v;
+  }
+
   get absX(): number {
     const parent = this.props.parent;
     return (

src/core/elementNode.ts

@@ -276,6 +276,7 @@ const LightningRendererNonAnimatingProps = [
   'offsetY',
   'overflowSuffix',
   'placeholderColor',
+  'fallbackImage',
   'preventCleanup',
   'rtt',
   'scrollable',
@@ -793,6 +794,7 @@ export class ElementNode {
       text: undefined,
       ignoreParentAlpha: undefined,
       placeholderColor: undefined,
+      fallbackImage: undefined,
     };
     this.children = [];