Fix display of failed-to-load image attachments in web UI (#34217)

This commit is contained in:
Eugen Rochko 2025-03-21 11:23:49 +01:00 committed by GitHub
parent a2981a0997
commit 1960aac90b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 23 additions and 2 deletions

View file

@ -38,6 +38,7 @@ class Item extends PureComponent {
state = {
loaded: false,
error: false,
};
handleMouseEnter = (e) => {
@ -81,6 +82,10 @@ class Item extends PureComponent {
this.setState({ loaded: true });
};
handleImageError = () => {
this.setState({ error: true });
};
render () {
const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
@ -148,6 +153,7 @@ class Item extends PureComponent {
lang={lang}
style={{ objectPosition: `${x}% ${y}%` }}
onLoad={this.handleImageLoad}
onError={this.handleImageError}
/>
</a>
);
@ -183,7 +189,7 @@ class Item extends PureComponent {
}
return (
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--error': this.state.error, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<Blurhash
hash={attachment.get('blurhash')}
dummy={!useBlurhash}