Fix display of failed-to-load image attachments in web UI (#34217)
This commit is contained in:
parent
a2981a0997
commit
1960aac90b
3 changed files with 23 additions and 2 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue