image-preview组件加载图片后依然隐藏，导致黑屏只有遮罩显示

[halaproliu]

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]

以下代码会出现问题：

<ImagePreview
  className="preview-image-container"
  openIndex={openIndex}
  replaceFallbackWhenLoaded={true}
  images={files.map((f) => {
    return { src: f as string, fallbackSrc: f };
  })}
  getDoubleClickScale={(currentScale) => (currentScale === 1 ? 2 : 1)}
  close={() => setOpenIndex(-1)}
/>

移除dom结构中的preview-hidden后，预览图片正常显示。

添加以下代码后，图片正常显示

useEffect(() => {
  if (openIndex > -1) {
    timeoutId.current = setTimeout(() => {
      removeHidden();
    }, 100) as unknown as number;
  }
  return () => {
    clearTimeout(timeoutId.current as number);
  };
}, [openIndex]);

[TinaPeach]

@halaproliu 同学，你传入的files的值提供下呢？我们用正常图片url尝试你的demo，没有复现，或者可以给一个复现的codepen？preview-hidden这个class出现，一般是因为图片的onload或onerror没有触发

[rockey2020]

我也出现了这个问题,用的是官方的demo代码 2.29.2 版本

[TinaPeach]

@rockey2020 同学，你的使用设备环境是？

[rockey2020]

@TinaPeach chrome 116.0.5845.96 以及安卓手机 ios手机都出现

[TinaPeach]

@rockey2020 有测试的图片url吗？任意图片传入都是一样？

[rockey2020]

@TinaPeach 随意一个图片都行 我是用swiper demo的图片地址 https://swiperjs.com/demos/400-zoom/core

[TinaPeach]

@rockey2020 能看下 https://arco.design/mobile/react/arco-design/mobile/#/components/image-preview 在你的环境下有这个问题嘛？

[rockey2020]

@TinaPeach 我更新了最新版 2.29.4 没有复现到这个问题 我上周还因为这个问题自己封装了一个image-preview 🤣 顺便提一下官方的轮播组件有性能问题,在真机中切换的时候有卡顿,掉帧了,用的还是chrome浏览器,配置不算差的中端机,于是不得不用swiper

[yeling]

我也遇到类似的问题，提交了一个PR

fix: image-preview refresh problem

问题描述：多张图片组件预览时，第一次打开黑屏，图片不显示
问题分析：
setImagesStatusByIndex setImagesStatus
如果两张图片的onload事件同时到达，此时render没有来得刷新，会出现在一次render期间
setImagesStatus被调用两次，
第一次刷新时根据 imagesStatusRef.current 来计算
setImagesStatus 之后imagesStatusRef.current值没有立即改变
第二次刷新时也根据 imagesStatusRef.current 来计算
覆盖了第一次刷新的结果，导致第一张图片的loaded状态一直为false

[TinaPeach]

@yeling 同学，感谢复现和修复，pr提了些comment，修改完就可以merge哈

[TinaPeach]

@arco-design/[email protected]中已修复