Add a way to fallback to a different image for avatars and image attachments

[NotDemonix]

Please check if I've done this correctly and if it will work properly for react and other frameworks.

[favna]

For starters this is the proper code for Lit element. I strongly recommend you use a proper editor when writing code such as VSCode because there were TypeScript errors in your code before.

As for testing it with React and other frameworks, that's on you as the contributor to do really. You can leverage https://github.com/skyra-project/discord-components-implementations with Yarn Linking to do so. If anything you could at least provide sample React code that I can use for testing since this requires the error case to be triggered and I do not know what edge case you're facing that does so. That said, I suspect it won't work and this has to be followed instead: https://lit.dev/docs/components/lifecycle/#errors-in-the-update-cycle

[favna]

Suggested change

	@property({ attribute: false })
	public onAvatarError?: (imgEl: HTMLImageElement) => void;
	private handleAvatarError(event: Event): void {
	if (!this.onAvatarError) return;
	const img = event.currentTarget as HTMLImageElement;
	this.onAvatarError(img);
	}
	@property({ attribute: false })
	public accessor onAvatarError: (imgEl: HTMLImageElement) => void;
	private handleAvatarError(event: Event): void {
	this.onAvatarError?.(event.currentTarget as HTMLImageElement);
	}

[favna]

Suggested change

	@property({ attribute: false })
	public onImageError?: (imgEl: HTMLImageElement) => void;
	private handleImageError(event: Event): void {
	if (!this.onImageError) return;
	const img = event.currentTarget as HTMLImageElement;
	this.onImageError(img);
	}
	@property({ attribute: false })
	public accessor onImageError: (imgEl: HTMLImageElement) => void;
	private handleImageError(event: Event): void {
	this.onImageError?.(event.currentTarget as HTMLImageElement);
	}

[favna]

Suggested change

	@property({ attribute: false })
	public onAvatarError?: (imgEl: HTMLImageElement) => void;
	private handleAvatarError(event: Event): void {
	if (!this.onAvatarError) return;
	const img = event.currentTarget as HTMLImageElement;
	this.onAvatarError(img);
	}
	@property({ attribute: false })
	public accessor onAvatarError: (imgEl: HTMLImageElement) => void;
	private handleAvatarError(event: Event): void {
	this.onAvatarError?.(event.currentTarget as HTMLImageElement);
	}

[favna]

Suggested change

	@property({ attribute: false })
	public onAvatarError?: (imgEl: HTMLImageElement) => void;
	private handleAvatarError(event: Event): void {
	if (!this.onAvatarError) return;
	const img = event.currentTarget as HTMLImageElement;
	this.onAvatarError(img);
	}
	@property({ attribute: false })
	public accessor onAvatarError: (imgEl: HTMLImageElement) => void;
	private handleAvatarError(event: Event): void {
	this.onAvatarError?.(event.currentTarget as HTMLImageElement);
	}

[favna]

Suggested change

	() => html`<img class="discord-replied-message-avatar" src="${ifDefined(profile.avatar)}" alt="${ifDefined(profile.author)}" @error=${this.handleAvatarError} />`
	() =>
	html`<img
	class="discord-replied-message-avatar"
	src="${ifDefined(profile.avatar)}"
	alt="${ifDefined(profile.author)}"
	@error=${this.handleAvatarError}
	/>`

[favna]

Suggested change

	<img src="${ifDefined(profile.avatar)}" alt="${ifDefined(profile.author)}" @error=${this.handleAvatarError} />
	<img src="${ifDefined(profile.avatar)}" alt="${ifDefined(profile.author)}" @error=${this.handleAvatarError} />

[favna]

Suggested change

	() => html`<img class="discord-replied-message-avatar" src="${ifDefined(profile.avatar)}" alt="${ifDefined(profile.author)}" @error=${this.handleAvatarError} />`
	() =>
	html`<img
	class="discord-replied-message-avatar"
	src="${ifDefined(profile.avatar)}"
	alt="${ifDefined(profile.author)}"
	@error=${this.handleAvatarError}
	/>`