From 3ea50554dfdb88e01d9178cafaf22be626f52d08 Mon Sep 17 00:00:00 2001
From: Kevin Smith <zenparsing@gmail.com>
Date: Mon, 8 Sep 2025 11:32:50 -0400
Subject: [PATCH] [NTP Next] Allow sanitized images to be lazy loaded (#31058)

---
 .../components/common/safe_image.tsx          | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/browser/resources/brave_new_tab_page_refresh/components/common/safe_image.tsx b/browser/resources/brave_new_tab_page_refresh/components/common/safe_image.tsx
index aaad48802b1..8d98aa2419a 100644
--- a/browser/resources/brave_new_tab_page_refresh/components/common/safe_image.tsx
+++ b/browser/resources/brave_new_tab_page_refresh/components/common/safe_image.tsx
@@ -5,7 +5,7 @@
 
 import * as React from 'react'
 
-import { loadImage, placeholderImageSrc } from '../../lib/image_loader'
+import { placeholderImageSrc } from '../../lib/image_loader'
 
 interface Props {
   src: string
@@ -13,14 +13,16 @@ interface Props {
 }
 
 export function SafeImage(props: Props) {
-  const [imageURL, setImageURL] = React.useState(placeholderImageSrc)
-
-  React.useEffect(() => {
-    const url = 'chrome://image?url=' + encodeURIComponent(props.src || '')
-    loadImage(url).then((loaded) => {
-      setImageURL(loaded ? url : placeholderImageSrc)
-    })
-  }, [props.src])
-
-  return <img src={imageURL} loading='lazy' className={props.className} />
+  return (
+    <img
+      src={
+        props.src
+          ? 'chrome://image?url=' + encodeURIComponent(props.src)
+          : placeholderImageSrc
+      }
+      loading='lazy'
+      className={props.className}
+      onError={(event) => { event.currentTarget.src = placeholderImageSrc }}
+    />
+  )
 }