@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vite-plus/test";
+
+const harness = vi.hoisted(() => ({
+  failImage: () => {},
+  Passthrough: ({ children }: { children?: unknown }) => children,
+}));
+
+vi.mock("react-native", () => ({
+  Pressable: harness.Passthrough,
+  StyleSheet: { absoluteFill: {} },
+  View: harness.Passthrough,
+}));
+vi.mock("expo-image", () => ({
+  Image: (props: { onError: () => void }) => {
+    harness.failImage = props.onError;
+    return <img alt="" />;
+  },
+}));
+vi.mock("expo/fetch", () => ({ fetch: vi.fn() }));
+vi.mock("react-native-svg", () => ({ parse: vi.fn(), SvgAst: () => null }));
+vi.mock("@t3tools/client-runtime/state/assets", () => ({ MISSING_FILE_ACCESS_MESSAGE: "" }));
+vi.mock("../../components/ui/AppActivityIndicator", () => ({ AppActivityIndicator: () => null }));
+vi.mock("../../components/FilePreviewGallery", () => ({
+  useFilePreviewGallery: () => (source: unknown) => source,
+}));
+vi.mock("../../components/ui/AppText", () => ({
+  AppText: ({ children }: { children?: ReactNode }) => <span>{children}</span>,
+}));
+vi.mock("../../components/MediaActionsMenu", () => ({ MediaActionsMenu: harness.Passthrough }));
+vi.mock("../../components/ui/NativePresentation", () => ({
+  PresentationSource: harness.Passthrough,
+}));
+vi.mock("../../state/mediaActions", () => ({ useMediaActions: () => ({ actions: [] }) }));
+vi.mock("../../state/assets", () => ({ useAssetUrlState: vi.fn() }));
+
+import { ThreadMarkdownImageView } from "./ThreadMarkdownImage";
+
+it("retries a failed image once its URI comes back through null", async () => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  const view = (uri: string | null) => (
+    <ThreadMarkdownImageView
+      uri={uri}
+      sourceKey="attachment:a"
+      unavailable={false}
+      alt={null}
+      onPressPreview={() => {}}
+    />
+  );
+  try {
+    await act(async () => root.render(view("https://example.test/a.png")));
+    await act(async () => harness.failImage());
+    expect(container.textContent).toContain("Image unavailable");
+
+    await act(async () => root.render(view(null)));
+    await act(async () => root.render(view("https://example.test/a.png")));
+    expect(container.textContent).not.toContain("Image unavailable");
+    expect(container.querySelector("img")).not.toBeNull();
+  } finally {
+    await act(async () => root.unmount());
+  }
+});
@@ -51,7 +51,9 @@ export function ThreadMarkdownImageView(props: {
     size: { width: number; height: number };
   } | null>(null);
   const decodedSize = decoded?.sourceKey === props.sourceKey ? decoded.size : null;
-  const [failedUri, setFailedUri] = useState<string | null>(null);
+  // A failure belongs to one URI; any URI change, including through null, retries.
+  const [failure, setFailure] = useState({ uri: props.uri, failed: false });
+  if (failure.uri !== props.uri) setFailure({ uri: props.uri, failed: false });
 
   const sourceSize = decodedSize ?? props.knownSize ?? null;
   const displaySize: MarkdownImageDisplaySize | null =
@@ -62,7 +64,8 @@ export function ThreadMarkdownImageView(props: {
           sourceHeight: sourceSize.height,
           availableWidth,
         });
-  const failed = props.unavailable || (props.uri !== null && failedUri === props.uri);
+  const failed =
+    props.unavailable || (props.uri !== null && failure.uri === props.uri && failure.failed);
   const placeholderWidth: ViewStyle["width"] =
     availableWidth > 0 ? Math.min(availableWidth, MARKDOWN_IMAGE_MAX_WIDTH) : "100%";
   const frameStyle: ViewStyle = displaySize ?? { width: placeholderWidth, aspectRatio: 16 / 9 };
@@ -125,7 +128,7 @@ export function ThreadMarkdownImageView(props: {
                   uri={props.uri}
                   format={props.format}
                   onLoad={(size) => setDecoded({ sourceKey: props.sourceKey, size })}
-                  onError={() => setFailedUri(props.uri)}
+                  onError={() => setFailure({ uri: props.uri, failed: true })}
                 />
               </View>
             </Pressable>
 
@@ -10,6 +10,7 @@ const reactTests = [
   "src/components/ui/Dialog.android.test.tsx",
   "src/features/settings/SettingsServerControlsRouteScreen.test.tsx",
   "src/features/settings/components/BranchNamingSettings.test.tsx",
+  "src/features/threads/ThreadMarkdownImage.test.tsx",
   "src/features/threads/UsageLimitRecoveryCard.test.tsx",
   "src/native/NativeHeaderToolbar.test.tsx",
   "src/native/useRestingTopOffset.test.tsx",