fix: image element rendering triggers an exception (#1906)

* fix: image element rendering triggers an exception

* chore: add image bugfix demo #1906

.changeset/loud-icons-press.md

@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-canvas-renderer': patch
+'@antv/g-plugin-image-loader': patch
+---
+
+fix: image element rendering triggers an exception

.eslintrc.cjs

@@ -49,6 +49,7 @@ module.exports = {
     'import/no-cycle': 'warn',
     'import/no-duplicates': 'warn',
     'class-methods-use-this': 'warn',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
     'no-plusplus': [
       'warn',
       {

__tests__/demos/bugfix/1906.ts

@@ -0,0 +1,33 @@
+import { Canvas, Image as GImage } from '@antv/g';
+
+/**
+ * @see https://github.com/antvis/G/pull/1906
+ */
+export async function issue_1906(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  await canvas.ready;
+  canvas.context.config.enableLargeImageOptimization = true;
+
+  const img = new Image();
+  img.onload = () => {
+    console.log('onload', img.complete);
+
+    // remove && expect no error
+    requestAnimationFrame(() => {
+      image.remove();
+    });
+  };
+
+  let image = new GImage({
+    style: {
+      x: 0,
+      y: 0,
+      src: img,
+    },
+  });
+
+  img.src =
+    'https://mdn.alipayobjects.com/huamei_fr7vu1/afts/img/A*SqloToP7R9QAAAAAAAAAAAAADkn0AQ/original';
+
+  canvas.appendChild(image);
+}

__tests__/demos/bugfix/index.ts

@@ -10,6 +10,7 @@ export { test_pick } from './1747';
 export { issue_1760 } from './1760';
 export { issue_1176 } from './1176';
 export { issue_1882 } from './1882';
+export { issue_1906 } from './1906';
 export { textWordWrap } from './textWordWrap';
 export { group_with_stroke } from './group-with-stroke';
 export { switchRenderer } from './switch-renderer';

packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts

@@ -47,14 +47,19 @@ export class ImageRenderer extends DefaultRenderer {
     if (!imageCache.downSampled) {
       this.imagePool
         .createDownSampledImage(src, object)
-        .then((res) => {
+        .then(() => {
+          // be removed from dom tree
+          if (!object.ownerDocument) {
+            return;
+          }
+
           // rerender
           // object.dirty();
           object.renderable.dirty = true;
           object.ownerDocument.defaultView.context.renderingService.dirtify();
         })
-        .catch(() => {
-          //
+        .catch((reason) => {
+          console.error(reason);
         });
 
       return;
@@ -92,15 +97,20 @@ export class ImageRenderer extends DefaultRenderer {
           src,
           [],
           () => {
+            // be removed from dom tree
+            if (!object.ownerDocument) {
+              return;
+            }
+
             // rerender
             // object.dirty();
             object.renderable.dirty = true;
             object.ownerDocument.defaultView.context.renderingService.dirtify();
           },
           object,
         )
-        .catch(() => {
-          //
+        .catch((reason) => {
+          console.error(reason);
         });
 
       return;
@@ -244,7 +254,9 @@ export class ImageRenderer extends DefaultRenderer {
         imageRect,
         drawRect,
       });
-    } catch {}
+    } catch {
+      // expected error
+    }
   }
 
   // ---

packages/g-plugin-image-loader/src/ImagePool.ts

@@ -85,8 +85,8 @@ export class ImagePool {
       .then((cache) => {
         callback?.(cache);
       })
-      .catch(() => {
-        //
+      .catch((reason) => {
+        console.error(reason);
       });
 
     return null;