Fix missing cached images

src/components/Avatar/Avatar.tsx

@@ -53,8 +53,15 @@ const Avatar: Component<{
 
   const imgError = (event: any) => {
     const image = event.target;
+
+    let src = props.user?.picture || props.src;
+
+    if (image.src === src) {
+      src = defaultAvatar;
+    }
+
     image.onerror = "";
-    image.src = defaultAvatar;
+    image.src = src;
     return true;
   }
 
@@ -87,8 +94,9 @@ const Avatar: Component<{
 
     const src = props.user?.picture || props.src;
 
+
     if (!src) {
-      return defaultAvatar;
+      return '';
     }
 
     const url = media?.actions.getMediaUrl(src, size, true);
@@ -137,6 +145,7 @@ const Avatar: Component<{
               class={props.zoomable ? 'profile_image' : ''}
               media={imageMedia()}
               src={imageSrc()}
+              altSrc={props.user?.picture || props.src}
               onError={imgError}
             />
           </Show>

src/components/NoteImage/NoteImage.tsx

@@ -12,6 +12,7 @@ const NoteImage: Component<{
   media?: MediaVariant,
   width?: number,
   src?: string,
+  altSrc?: string,
   isDev?: boolean,
   onError?: JSX.EventHandlerUnion<HTMLImageElement, Event>,
   onImageLoaded?: (url: string | undefined) => void,
@@ -25,10 +26,28 @@ const NoteImage: Component<{
 
   const [isImageLoaded, setIsImageLoaded] = createSignal(false);
 
-  const src = () => props.media?.media_url || props.src;
+  const [src, setSrc] = createSignal<string | undefined>();
+
+  // const src = () => props.media?.media_url || props.src;
 
   const isCached = () => !props.isDev || props.media;
 
+  const onError = (event: any) => {
+    const image = event.target;
+
+    if (image.src === props.altSrc || !props.altSrc) {
+      // @ts-ignore
+      props.onError(event);
+      return true;
+    }
+
+    setSrc(() => props.altSrc || '');
+
+    image.onerror = "";
+    image.src = src();
+    return true;
+  };
+
   const ratio = () => {
     const img = props.media;
 
@@ -88,12 +107,17 @@ const NoteImage: Component<{
       setIsImageLoaded(true);
     }
 
+    setSrc(() => props.media?.media_url || props.src);
+  });
+
+  createEffect(() => {
     // Virtually load an image, to be able to get it's dimensions to zoom it properly
     imgVirtual = new Image();
     imgVirtual.src = src() || '';
     imgVirtual.onload = () => {
       setIsImageLoaded(true);
-    }
+    };
+    imgVirtual.onerror = onError;
   });
 
   createEffect(() => {
@@ -118,7 +142,7 @@ const NoteImage: Component<{
           ref={imgActual}
           src={src()}
           class={klass()}
-          onerror={props.onError}
+          onerror={onError}
           width={willBeTooBig() ? undefined : `${props.width || 524}px`}
         />
       </a>

src/pages/Profile.module.scss

@@ -33,6 +33,7 @@
   position: absolute;
   top: 148px;
   left: 15px;
+  overflow: hidden;
   .avatar {
     border: solid 4px var(--background-site);
     border-radius: 50%;

src/pages/Profile.tsx

@@ -170,6 +170,14 @@ const Profile: Component = () => {
   };
 
   const imgError = (event: any) => {
+    const image = event.target;
+
+    if (image.src !== profile?.userProfile?.banner) {
+      image.onerror = "";
+      image.src = profile?.userProfile?.banner;
+      return true;
+    }
+
     const banner = document.getElementById('profile_banner');
 
     if (banner) {
@@ -198,7 +206,7 @@ const Profile: Component = () => {
   const [isBannerCached, setisBannerCached] = createSignal(false);
 
   const banner = () => {
-    const src= profile?.userProfile?.banner;
+    const src = profile?.userProfile?.banner;
     const url = media?.actions.getMediaUrl(src, 'm', true);
 
     setisBannerCached(!!url);
@@ -510,7 +518,13 @@ const Profile: Component = () => {
             when={profile?.userProfile?.banner}
             fallback={<div class={styles.bannerPlaceholder}></div>}
           >
-            <NoteImage class="profile_image" src={banner()} onError={imgError} plainBorder={true} />
+            <NoteImage
+              class="profile_image"
+              src={banner()}
+              altSrc={profile?.userProfile?.banner}
+              onError={imgError}
+              plainBorder={true}
+            />
           </Show>
         </div>