fix: handle disconnection state in image directive

src/shared/texture/directives/image.js

@@ -46,6 +46,10 @@ class ImageDirective extends AsyncDirective {
      * @param {Function} [onClick] - Callback function to be called once the image has been clicked.
      */
     onError(src, href, onLoad, onClick) {
+        if (!this.isConnected) {
+            return href ? getHyperlinkTemplate(href) : html`<span>Image failed to load</span>`;
+        }
+
         if (isURLWithImageExtension(src)) {
             href && this.setValue(getHyperlinkTemplate(href));
         } else {
@@ -59,6 +63,7 @@ class ImageDirective extends AsyncDirective {
                 }
             } catch (error) {
                 console.error("Invalid URL:", src);
+                return href ? getHyperlinkTemplate(href) : html`<span>Image failed to load</span>`;
             }
         }
     }

src/types/plugins/rosterview/approval-alert.d.ts

@@ -5,7 +5,7 @@ export default class ContactApprovalAlert extends CustomElement {
         };
     };
     contact: any;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | "";
     /**
      * @param {MouseEvent} ev
      */

src/types/plugins/rosterview/templates/approval-alert.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: import("../approval-alert").default): import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../approval-alert").default): import("lit-html").TemplateResult<1> | "";
 export default _default;
 //# sourceMappingURL=approval-alert.d.ts.map

src/types/shared/texture/directives/image.d.ts

@@ -32,7 +32,7 @@ declare class ImageDirective extends AsyncDirective {
      * @param {Function} [onLoad] - Callback function to be called once the image has loaded.
      * @param {Function} [onClick] - Callback function to be called once the image has been clicked.
      */
-    onError(src: string, href?: string, onLoad?: Function, onClick?: Function): void;
+    onError(src: string, href?: string, onLoad?: Function, onClick?: Function): string | import("utils/html.js").TemplateResult;
 }
 import { AsyncDirective } from "lit/async-directive.js";
 export {};