fix: [Image] Fix the image is not loaded normally when the src in Ima…

[YyumeiZhang]

…ge changes in lazy loading mode

中文模板 / Chinese Template

• I have read and followed Pull Request Guidelines of the contributing guide.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Test Case
• TypeScript definition update
• Document improve
• CI/CD improve
• Branch sync
• Other, please describe:

PR description

Fixes #1526

Changelog

🇨🇳 Chinese

• Fix: 修复懒加载模式下 Image 的 src 变化，图片无法正常加载问题 [BUG] <Image> 远程获取Src, 懒加载机制会导致图片无法显示 #1526

---

🇺🇸 English

• Fix: Fix the problem that the src of Image changes in lazy loading mode, and the image cannot be loaded normally.

Checklist

• Test or no need
• Document or no need
• Changelog or no need

Other

• Skip Changelog

Additional information

懒加载使用的是 IntersectionObserver， 原来的方式是在 preivew 层的 componentDidmout 去找到所有的 img元素，加入observe，此方式对 src 变化不友好（比如远程加载，修改src）

修改：

1. new 出来的 IntersectionObserver在 Preview的constructor中，通过 context 传给子组件
2. 在 Image 中 componentdidMout / componentdidUpdate 中查看 src 是否更新，将子组件注册给 observer

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9aa6c87:

Sandbox	Source
pr-story	Configuration
Semi Design: Simple Story	Configuration

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and project coverage change: +0.80 🎉

Comparison is base (a31dd2d) 88.00% compared to head (670cc00) 88.80%.

❗ Current head 670cc00 differs from pull request most recent head 9aa6c87. Consider uploading reports for the commit 9aa6c87 to get more accurate results

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1579      +/-   ##
==========================================
+ Coverage   88.00%   88.80%   +0.80%     
==========================================
  Files         433      433              
  Lines       25060    25063       +3     
  Branches     6291     6290       -1     
==========================================
+ Hits        22053    22257     +204     
+ Misses       3007     2806     -201     

Impacted Files	Coverage Δ
packages/semi-ui/image/previewContext.tsx	100.00% <ø> (ø)
packages/semi-ui/image/image.tsx	95.50% <100.00%> (+19.55%)	⬆️
packages/semi-ui/image/preview.tsx	94.82% <100.00%> (+3.02%)	⬆️
packages/semi-ui/table/Table.tsx	88.34% <100.00%> (+0.45%)	⬆️

... and 14 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.