diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx index 5132316600..e52e14b1ed 100644 --- a/app/javascript/mastodon/components/media_gallery.jsx +++ b/app/javascript/mastodon/components/media_gallery.jsx @@ -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} /> ); @@ -183,7 +189,7 @@ class Item extends PureComponent { } return ( -
+
{ setLoaded(true); }, [setLoaded]); + const handleImageError = useCallback(() => { + setError(true); + }, [setError]); + const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (e.target instanceof HTMLVideoElement) { @@ -98,6 +103,7 @@ export const MediaItem: React.FC<{ alt={description} lang={lang} onLoad={handleImageLoad} + onError={handleImageError} />
@@ -118,6 +124,7 @@ export const MediaItem: React.FC<{ lang={lang} style={{ objectPosition: `${x}% ${y}%` }} onLoad={handleImageLoad} + onError={handleImageError} /> ); } else if (['video', 'gifv'].includes(type)) { @@ -173,7 +180,11 @@ export const MediaItem: React.FC<{ } return ( -
+