Add image onerror handling for avatars

Author: romanzipp

src/common/imageOnError.js

@@ -0,0 +1,8 @@
+/**
+ * @param e
+ * @param className string[]
+ */
+export default function imageOnError(e, className = []) {
+    e.target.onError = null;
+    e.target.classList.add('text-transparent', ...className);
+}

src/entries/contentScript/components/ReactionsHistoryNotice.jsx

@@ -12,6 +12,7 @@ import { hasSubscriptionFeature } from '~/entries/contentScript/hooks/useSubscri
 import { subscriptionIds, subscriptionFeatures } from '~/enums';
 import PremiumCtaLabel from '~/entries/contentScript/components/PremiumCtaLabel';
 import { buildReactionFromUrl } from '~/common/pretty';
+import imageOnError from '~/common/imageOnError';
 
 function ReactionPreview({ reaction }) {
     const { t } = useTranslation();
@@ -34,6 +35,7 @@ function ReactionPreview({ reaction }) {
                         <img
                             src={reaction.from_info.avatar_url}
                             className="inline size-7 overflow-hidden rounded-full"
+                            onError={(e) => imageOnError(e, ['bg-primary-gradient-hc-from/40'])}
                             alt={reaction.from_info.name}
                         />
                     </a>