Add fallback image for broken images (#2434)

Co-authored-by: Dessalines <dessalines@users.noreply.github.com>

src/assets/symbols.svg

@@ -170,8 +170,11 @@
     <symbol id="icon-message-square" viewBox="0 0 24 24">
       <path d="M22 15v-10c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-14c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v16c0 0.256 0.098 0.512 0.293 0.707 0.391 0.391 1.024 0.391 1.414 0l3.707-3.707h11.586c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121zM20 15c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.526 0.112-0.707 0.293l-2.293 2.293v-13.586c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"/>
     </symbol>
-    <symbol id="icon-image" viewBox="0 0 24 24">
-      <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"/>
+    <symbol id="icon-image" viewBox="0 0 256 256">
+      <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z" />
+    </symbol>
+    <symbol id="icon-image-broken" viewBox="0 0 256 256">
+      <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z" />
     </symbol>
     <symbol id="icon-external-link" viewBox="0 0 24 24">
       <path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"/>

src/shared/components/common/pictrs-image.tsx

@@ -1,9 +1,10 @@
 import classNames from "classnames";
-import { Component } from "inferno";
+import { Component, linkEvent } from "inferno";
 
 import { UserService } from "../../services";
 import { setIsoData } from "@utils/app";
 import { IsoData } from "../../interfaces";
+import { getStaticDir } from "@utils/env";
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
@@ -20,13 +21,35 @@ interface PictrsImageProps {
   cardTop?: boolean;
 }
 
-export class PictrsImage extends Component<PictrsImageProps, any> {
+interface PictrsImageState {
+  src: string;
+}
+
+function handleImgLoadError(i: PictrsImage) {
+  i.setState({
+    src: `${getStaticDir()}/assets/images/broken-image-fallback.png`,
+  });
+}
+
+export class PictrsImage extends Component<PictrsImageProps, PictrsImageState> {
   private readonly isoData: IsoData = setIsoData(this.context);
 
+  state: PictrsImageState = {
+    src: this.props.src,
+  };
+
+  componentDidUpdate(prevProps: PictrsImageProps) {
+    if (prevProps.src !== this.props.src) {
+      this.setState({ src: this.props.src });
+    }
+  }
+
   render() {
-    const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
+    const { icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
       this.props;
 
+    const { src } = this.state;
+
     const blurImage =
       nsfw &&
       (UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw ??
@@ -58,6 +81,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
               "avatar-pushup": pushup,
               "card-img-top": cardTop,
             })}
+            onError={linkEvent(this, handleImgLoadError)}
           />
         </picture>
       )
@@ -70,14 +94,14 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
     let url: URL | undefined;
     try {
-      url = new URL(this.props.src);
+      url = new URL(this.state.src);
     } catch {
-      return this.props.src;
+      return this.state.src;
     }
 
     // If there's no match, then it's not a pictrs image
     if (!url.pathname.includes("/pictrs/image/")) {
-      return this.props.src;
+      return this.state.src;
     }
 
     // Keeps original search params. Could probably do `url.search = ""` here.