fixes #717

src/components/avatar/avatar.test.ts

@@ -1,4 +1,5 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
 import type SlAvatar from './avatar';
 
 describe('<sl-avatar>', () => {
@@ -106,4 +107,29 @@ describe('<sl-avatar>', () => {
       expect(span.innerHTML).to.eq('random content');
     });
   });
+
+  it('should not render the image when the image fails to load', async () => {
+    const errorHandler = sinon.spy();
+
+    el = await fixture<SlAvatar>(html`<sl-avatar></sl-avatar>`);
+    el.addEventListener('error', errorHandler);
+    el.image = 'bad_image';
+    waitUntil(() => errorHandler.calledOnce);
+
+    expect(el.shadowRoot!.querySelector('img')).to.be.null;
+  });
+
+  it('should show a valid image after being passed an invalid image initially', async () => {
+    const errorHandler = sinon.spy();
+
+    el = await fixture<SlAvatar>(html`<sl-avatar></sl-avatar>`);
+    el.addEventListener('error', errorHandler);
+    el.image = 'bad_image';
+    waitUntil(() => errorHandler.calledOnce);
+
+    el.image = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('img')).to.exist;
+  });
 });

src/components/avatar/avatar.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../../components/icon/icon';
+import { watch } from '../../internal/watch';
 import styles from './avatar.styles';
 
 /**
@@ -26,17 +27,23 @@ export default class SlAvatar extends LitElement {
   @state() private hasError = false;
 
   /** The image source to use for the avatar. */
-  @property() image?: string;
+  @property() image = '';
 
   /** A label to use to describe the avatar to assistive devices. */
   @property() label = '';
 
   /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  @property() initials?: string;
+  @property() initials = '';
 
   /** The shape of the avatar. */
   @property({ reflect: true }) shape: 'circle' | 'square' | 'rounded' = 'circle';
 
+  @watch('image')
+  handleImageChange() {
+    // Reset the error when a new image is provided
+    this.hasError = false;
+  }
+
   render() {
     return html`
       <div
@@ -59,7 +66,7 @@ export default class SlAvatar extends LitElement {
                 </slot>
               </div>
             `}
-        ${typeof this.image === 'string' && !this.hasError
+        ${this.image && !this.hasError
           ? html`
               <img
                 part="image"