(answer) branch external-img updated: fix: Optimize external resource image blocking

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch external-img
in repository https://gitbox.apache.org/repos/asf/answer.git


The following commit(s) were added to refs/heads/external-img by this push:
     new 597f617c fix: Optimize external resource image blocking
597f617c is described below

commit 597f617c790a79d4c82b42fc71d976a0c095e1d0
Author: shuai <lishuail...@sifou.com>
AuthorDate: Fri Mar 14 11:50:32 2025 +0800

    fix: Optimize external resource image blocking
---
 ui/src/components/Avatar/index.tsx | 17 +++++-------
 ui/src/pages/Layout/index.tsx      | 53 ++++++++++++++++++++++++--------------
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/ui/src/components/Avatar/index.tsx 
b/ui/src/components/Avatar/index.tsx
index 357beb0c..9762776e 100644
--- a/ui/src/components/Avatar/index.tsx
+++ b/ui/src/components/Avatar/index.tsx
@@ -57,16 +57,13 @@ const Index: FC<IProps> = ({
     className && className.indexOf('rounded') !== -1 ? '' : 'rounded-circle';
 
   return (
-    <>
-      {/* eslint-disable 
jsx-a11y/no-noninteractive-element-to-interactive-role,jsx-a11y/control-has-associated-label
 */}
-      <img
-        src={url || DefaultAvatar}
-        width={size}
-        height={size}
-        className={classNames(roundedCls, className)}
-        alt={alt}
-      />
-    </>
+    <img
+      src={url || DefaultAvatar}
+      width={size}
+      height={size}
+      className={classNames(roundedCls, className)}
+      alt={alt}
+    />
   );
 };
 
diff --git a/ui/src/pages/Layout/index.tsx b/ui/src/pages/Layout/index.tsx
index 4ed908c2..e61d5afd 100644
--- a/ui/src/pages/Layout/index.tsx
+++ b/ui/src/pages/Layout/index.tsx
@@ -79,43 +79,56 @@ const Layout: FC = () => {
     };
   }, []);
 
-  const replaceImgSrc = (img) => {
+  const replaceImgSrc = () => {
     const storageUserExternalMode = Storage.get(EXTERNAL_CONTENT_DISPLAY_MODE);
+    const images = document.querySelectorAll(
+      'img:not([data-processed])',
+    ) as NodeListOf<HTMLImageElement>;
 
-    if (
-      storageUserExternalMode !== 'always' &&
-      img.src &&
-      !img.src.startsWith(window.location.origin)
-    ) {
-      externalToast.onShow();
-      img.dataset.src = img.src;
-      img.removeAttribute('src');
-    }
+    images.forEach((img) => {
+      // 标记为已处理，避免重复处理
+      img.setAttribute('data-processed', 'true');
+
+      if (
+        img.src &&
+        storageUserExternalMode !== 'always' &&
+        !img.src.startsWith('/') &&
+        !img.src.startsWith('data:') &&
+        !img.src.startsWith('blob:') &&
+        !img.src.startsWith(window.location.origin)
+      ) {
+        externalToast.onShow();
+        img.dataset.src = img.src;
+        img.removeAttribute('src');
+      }
+    });
   };
 
   useEffect(() => {
     // Controlling the loading of external image resources
     const observer = new MutationObserver((mutationsList) => {
+      let hasNewImages = false;
       mutationsList.forEach((mutation) => {
         if (mutation.type === 'childList') {
           mutation.addedNodes.forEach((node) => {
-            if (node.nodeName === 'IMG') {
-              replaceImgSrc(node);
-            }
-            if ((node as Element).querySelectorAll) {
-              const images = (node as Element).querySelectorAll('img');
-              images.forEach(replaceImgSrc);
+            if (
+              node.nodeName === 'IMG' ||
+              (node.nodeType === 1 &&
+                (node as Element).querySelectorAll('img:not([data-processed])')
+                  .length > 0)
+            ) {
+              hasNewImages = true;
             }
           });
         }
       });
+      // 如果发现新图片，处理它们
+      if (hasNewImages) {
+        replaceImgSrc();
+      }
     });
 
     if (externalContentDisplay !== 'always_display') {
-      // Process all existing images
-      const images = document.querySelectorAll('img');
-      images.forEach(replaceImgSrc);
-      // Process all images added later
       observer.observe(document.body, { childList: true, subtree: true });
     }