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.

[behonestfilms]

Just adding a voice in support of this change. Same problem on rooms I run, created this year. I see the
browser's broken image icon, not the default letter avatar. I understand this is only a workaround and not real authenticated media support, which is a much bigger topic (#351). But the fallback alone would help a lot.

The reason I care: I discovered Matrix a few months ago and since then I've convinced around 20 people to create an account and actually use it. So I've watched a lot of first-time users go through this. That moment when someone opens the link and decides whether to sign up really matters, and right now it isn't great. matrix.to is often the first thing a person sees, and a broken image icon there makes the whole platform look unfinished, before they even install a client. Most of them have never heard of Matrix.

A neutral placeholder would look intentional instead of broken.