[BUG] When the Image src is a URL address, repeated rendering may fail

[wang1212]

• OS: [e.g. win10, iOS8.1]
• Browser [e.g. chrome, safari]
• Version [e.g. @antv/g-lite@6.1.10]

@antv/g-lite@6.x

Steps To Reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Link to code example:

The current behavior

When the image src is a URL address, the first rendering is normal, but subsequent repeated rendering may fail when the element tree structure is changed or remounted.

But when the src value is changed to the Image instance of the Web API, the rendering is normal.

The expected behavior

Image's src attribute can be successfully rendered in any case when it is any form of value.

[GeoDaoyu]

有在线代码示例么？比如codepen。

[github-actions]

@wang1212 Hello! Here is an automated response to your question:

Thank you for reporting this issue with image rendering in @antv/g-lite@6.x.

---

📝 Issue Summary

• Problem: When using a URL string as the src for an Image, the first render is successful, but repeated rendering (after remounting or changing the element tree) may fail.
• Workaround: Using a native Image instance (HTMLImageElement) as the src works reliably.

---

🔍 Analysis

How @antv/g-lite Handles Image src:

• The src attribute of the Image component accepts either a URL string or an image object (HTMLImageElement, HTMLCanvasElement, ImageBitmap, etc.).
• When you provide a URL string, the internal loader fetches and caches the resource.
• When you provide an Image instance, you control the loading and lifecycle yourself.

Why Repeated Rendering Can Fail:

• If the element is remounted or the tree structure changes, the internal loader may not trigger a reload, leading to a race condition or a missing resource.
• The framework may not detect changes in the URL string or may not re-fetch the image if the element is reused or re-parented.

---

✅ Recommended Solution

Best Practice:
Use a preloaded HTMLImageElement for the src attribute. This ensures the image loads reliably and is ready when the component renders, regardless of remounts or structure changes.

Example:

import { Image as GImage, Canvas } from '@antv/g';

const img = new window.Image();
img.crossOrigin = 'Anonymous'; // Important for CORS images
img.src = 'https://example.com/image.png';

img.onload = () => {
  const image = new GImage({
    style: {
      x: 100,
      y: 100,
      width: 200,
      height: 200,
      src: img, // Use the loaded Image object
    },
  });
  canvas.appendChild(image);
};

• This pattern is officially recommended in the AntV G documentation.

---

🛠️ Additional Troubleshooting Steps

• Ensure CORS is set: Always set crossOrigin = 'Anonymous' for remote images.
• Upgrade: Test with the latest version of @antv/g-lite and related renderer packages.
• Console Errors: Check the browser console for network or rendering errors.
• Manual Reload: If you must use a URL string, consider forcing a reload by updating the src attribute or by removing/recreating the Image element.

---

💡 Enhancement Suggestion

It may help to improve the internal handling of URL strings in @antv/g-lite so that image resources are reliably reloaded on remount or attribute changes. You may wish to open a feature request for more robust resource management.

---

📦 References

• Image API Docs
• Example: Load from HTMLImageElement

---

If you need further help, please provide a minimal reproducible code sample or a CodeSandbox link so we can investigate more deeply.

---

Thank you for your contribution!

---

This is an automated response generated by AI. If you have any questions, our team will follow up as soon as possible.