Handle avatar load errors with placeholder

[nOw-Ay]

This PR updates matrix.to to use the default avatar placeholder when media authentication is not supported.

Currently, matrix.to attempts to load user avatars from authenticated media endpoints it cannot access. As a result, it displays broken or unreachable images, which negatively affects the user experience (see #351)

Changes:

• Added an onerror handler to the avatar image in LoadedPreviewView (src/preview/PreviewView.js) so that if the image fails to load, it is replaced with a default avatar element.

This ensures the UI remains clean and consistent, even when avatar images are unavailable.

[bugprone]

Thanks for working on this! The graceful fallback approach is definitely the right direction.

I noticed a potential issue with the current implementation:

Concern: TemplateBuilder scope in onerror callback

onerror: function(event) {
    const avatarContainer = event.target.parentNode;
    if (avatarContainer) {
        avatarContainer.replaceChild(
            t.div({className: "defaultAvatar"}),  // <- t captured via closure
            event.target
        );
    }
}

The t (TemplateBuilder) is captured via closure, but when onerror fires asynchronously, it's unclear if t.div() will behave correctly outside its original render context. Additionally, using replaceChild directly manipulates the DOM, which could conflict with TemplateView's binding system if avatarUrl ever changes.

Suggested alternative

A safer approach might be to hide the broken image and append a fallback, rather than replacing the node:

const avatar = t.map(vm => vm.avatarUrl, (avatarUrl, t) => {
    if (avatarUrl) {
        const img = t.img({className: "avatar", src: avatarUrl});
        img.addEventListener('error', function() {
            this.style.display = 'none';
            if (!this.parentNode.querySelector('.defaultAvatar')) {
                const fallback = document.createElement('div');
                fallback.className = 'defaultAvatar';
                this.parentNode.appendChild(fallback);
            }
        });
        return img;
    } else {
        return t.div({className: "defaultAvatar"});
    }
});

This avoids:

• Relying on t in async callback scope
• Replacing nodes that TemplateView might track
• Potential issues if the binding re-evaluates

Have you tested the current implementation with the actual authenticated media scenario? Curious if it works as expected.