diff --git a/web/src/lib/components/AdaptiveImage.svelte b/web/src/lib/components/AdaptiveImage.svelte
index 04136c721c..5596a47fdc 100644
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -261,10 +261,6 @@
         />
       {/if}
 
-      {#if show.brokenAsset}
-        <BrokenAsset class="absolute size-full text-xl" />
-      {/if}
-
       {#if show.preview}
         <ImageLayer
           {adaptiveImageLoader}
@@ -290,6 +286,10 @@
       {/if}
     </div>
 
+    {#if show.brokenAsset}
+      <BrokenAsset class="absolute inset-0 z-10 size-full text-xl" />
+    {/if}
+
     {#if overlays}
       <div class="pointer-events-none absolute inset-0">
         {@render overlays()}
diff --git a/web/src/lib/managers/asset-viewer-manager.svelte.ts b/web/src/lib/managers/asset-viewer-manager.svelte.ts
index 55c8570b78..551f50bc6d 100644
--- a/web/src/lib/managers/asset-viewer-manager.svelte.ts
+++ b/web/src/lib/managers/asset-viewer-manager.svelte.ts
@@ -44,7 +44,7 @@ class AssetViewerManager extends BaseEventManager<Events> {
   imageLoaderStatus = $state<ImageLoaderStatus | undefined>();
   #isImageLoading = $derived.by(() => {
     const quality = this.imageLoaderStatus?.quality;
-    if (!quality) {
+    if (!quality || this.imageLoaderStatus?.hasError) {
       return false;
     }
     const previewOrOriginalReady = quality.preview === 'success' || quality.original === 'success';