diff --git a/src/platform/web/ui/avatar.js b/src/platform/web/ui/avatar.js index 8845f887..715a4890 100644 --- a/src/platform/web/ui/avatar.js +++ b/src/platform/web/ui/avatar.js @@ -44,6 +44,11 @@ export class AvatarView extends BaseUpdateView { return false; } + setAvatarError() { + this._avatarError = true; + this.update(this.value); + } + _avatarTitleChanged() { if (this.value.avatarTitle !== this._avatarTitle) { this._avatarTitle = this.value.avatarTitle; @@ -65,6 +70,8 @@ export class AvatarView extends BaseUpdateView { this._avatarLetterChanged(); this._avatarTitleChanged(); this._root = renderStaticAvatar(this.value, this._size); + const image = this._root.firstChild; + image?.addEventListener("error", () => this.setAvatarError()); // takes care of update being called when needed super.mount(options); return this._root; @@ -76,10 +83,10 @@ export class AvatarView extends BaseUpdateView { update(vm) { // important to always call _...changed for every prop - if (this._avatarUrlChanged()) { + if (this._avatarUrlChanged() || this._avatarError) { // avatarColorNumber won't change, it's based on room/user id const bgColorClass = `usercolor${vm.avatarColorNumber}`; - if (vm.avatarUrl(this._size)) { + if (vm.avatarUrl(this._size) && !this._avatarError) { this._root.replaceChild(renderImg(vm, this._size), this._root.firstChild); this._root.classList.remove(bgColorClass); } else { @@ -87,7 +94,7 @@ export class AvatarView extends BaseUpdateView { this._root.classList.add(bgColorClass); } } - const hasAvatar = !!vm.avatarUrl(this._size); + const hasAvatar = !!(vm.avatarUrl(this._size) && !vm._avatarError); if (this._avatarTitleChanged() && hasAvatar) { const img = this._root.firstChild; img.setAttribute("title", vm.avatarTitle); @@ -95,6 +102,7 @@ export class AvatarView extends BaseUpdateView { if (this._avatarLetterChanged() && !hasAvatar) { this._root.firstChild.textContent = vm.avatarLetter; } + if (this._avatarError) { this._avatarError = false;} } } @@ -104,7 +112,7 @@ export class AvatarView extends BaseUpdateView { * @return {Element} */ export function renderStaticAvatar(vm, size, extraClasses = undefined) { - const hasAvatar = !!vm.avatarUrl(size); + const hasAvatar = !!(vm.avatarUrl(size) && !vm.avatarError); let avatarClasses = classNames({ avatar: true, [`size-${size}`]: true,