[Bug Report] ImagePreview 图片预览

[Gtanxingwen]

重现链接

https://drive.google.com/file/d/1vfVRDCf2sjTzSByMY2G8BH_vyCPAoVeY/view?usp=sharing

Vant 版本

3.3.0

描述一下你遇到的问题。

场景：页面中有2个模块 可以预览图片 点击第1个模块 预览能正常显示 点击第2个模块 预览就不能正常显示了

重现步骤

在vant 文档 图片预览 demo 中： 1，点击 预览图片 滑 滑 滑， 点击关闭； 2，点击 指定初始位置 滑 滑 滑，就会出问题了；

注意; 在钉钉里打开

设备/浏览器

钉钉

[nemo-shen]

iphone 13 mini ios 15.3.1 钉钉 6.4.40

未复现你描述的问题，是什么手机型号

[Gtanxingwen]

iphone 13 mini ios 15.3.1 钉钉 6.4.40

未复现你描述的问题，是什么手机型号

小米9 android 11 复现的 android 就能复现

[chenjiahan]

确实在安卓钉钉内能够复现，其他浏览器无法复现。目测是安卓钉钉 webview 内核有 bug，导致 Vue 3 响应式出现了异常，在组件层面不太好兼容。

[fuhao99]

你好，我在某银行自己内部也出现这种预览不显示图片的bug，请问怎么解决呢

[wangqi060934]

直接用Android钉钉访问文档网站的demo也会出现问题。

[ltinerary]

#11132 我也好像碰到相同的问题了，都是在安卓的阿里系软件的webview出现

[nideajun]

nuxt3用vant4的上传预览，代码如下： template van-uploader v-model="fileList" multiple :max-count="3" ></van-uploader template 上面代码部分这个<>在这里发布不显示，所以我省掉了，实际有的。

第一次查看没事，第二次点查看图片时，有遇到 <Suspense> is an experimental feature and its API will likely change. runtime-core.esm-bundler.js:40

   [Vue warn]: Unhandled error during execution of component event handler 

at <VanImage src="blob:http://127.0.0.1:3088/a4902d30-33c0-475f-8f89-0b5d0039c3d7" fit="contain" class="van-image-preview__image" ... > at <VanSwipeItem ref=Ref< Proxy {setOffset: ƒ, …} > class="van-image-preview__swipe-item" onTouchstartPassive=fn<onTouchStart> ... > at <Anonymous src="blob:http://127.0.0.1:3088/a4902d30-33c0-475f-8f89-0b5d0039c3d7" show=true active=0 ... > at <VanSwipe ref=Ref< Proxy {…} > lazyRender=true loop=true ... > at <BaseTransition onAfterEnter=fn<onOpened> onAfterLeave=fn<onClosed> appear=true ... > at <Transition name="van-fade" appear=true onAfterEnter=fn<onOpened> ... > at <VanPopup class="van-image-preview" overlayClass= (2) ['van-image-preview__overlay', undefined] onClosed=fn<onClosed> ... > at <VanImagePreview show=true loop=true images= (3) ['blob:http://127.0.0.1:3088/a4902d30-33c0-475f-8f89-0b5d0039c3d7', 'blob:http://127.0.0.1:3088/7caff3a6-ab81-4a99-a764-fd08bc84e606', 'blob:http://127.0.0.1:3088/8906c3aa-e041-448a-8731-0f94d9835b4f'] ... > at <App> warn2 @ runtime-core.esm-bundler.js:40 logError @ runtime-core.esm-bundler.js:214 handleError @ runtime-core.esm-bundler.js:206 callWithErrorHandling @ runtime-core.esm-bundler.js:160 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 emit$1 @ runtime-core.esm-bundler.js:714 (匿名) @ runtime-core.esm-bundler.js:7430 onLoad @ Image.mjs:56 (匿名) @ Image.mjs:143 (匿名) @ runtime-core.esm-bundler.js:2739 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2713 flushPostFlushCbs @ runtime-core.esm-bundler.js:343 flushJobs @ runtime-core.esm-bundler.js:397 Promise.then(异步) queueFlush @ runtime-core.esm-bundler.js:282 queueJob @ runtime-core.esm-bundler.js:276 (匿名) @ runtime-core.esm-bundler.js:5743 triggerEffect @ reactivity.esm-bundler.js:397 triggerEffects @ reactivity.esm-bundler.js:387 triggerRefValue @ reactivity.esm-bundler.js:1003 (匿名) @ reactivity.esm-bundler.js:1137 triggerEffect @ reactivity.esm-bundler.js:397 triggerEffects @ reactivity.esm-bundler.js:382 trigger @ reactivity.esm-bundler.js:355 set2 @ reactivity.esm-bundler.js:526 (匿名) @ SwipeItem.mjs:65 Promise.then(异步) nextTick @ runtime-core.esm-bundler.js:244 (匿名) @ SwipeItem.mjs:64 (匿名) @ runtime-core.esm-bundler.js:2739 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2713 flushPostFlushCbs @ runtime-core.esm-bundler.js:343 flushJobs @ runtime-core.esm-bundler.js:397 Promise.then(异步) queueFlush @ runtime-core.esm-bundler.js:282 queueJob @ runtime-core.esm-bundler.js:276 (匿名) @ runtime-core.esm-bundler.js:5743 triggerEffect @ reactivity.esm-bundler.js:397 triggerEffects @ reactivity.esm-bundler.js:387 trigger @ reactivity.esm-bundler.js:355 set2 @ reactivity.esm-bundler.js:526 open @ mount-component.mjs:12 showImagePreview @ function-call.mjs:59 previewImage @ Uploader.mjs:156 onPreview @ Uploader.mjs:182 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 emit$1 @ runtime-core.esm-bundler.js:714 (匿名) @ runtime-core.esm-bundler.js:7430 onPreview @ UploaderPreviewItem.mjs:60 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 invoker @ runtime-dom.esm-bundler.js:345 runtime-core.esm-bundler.js:40

   [Vue warn]: Unhandled error during execution of mounted hook 

at <VanImage src="blob:http://127.0.0.1:3088/a4902d30-33c0-475f-8f89-0b5d0039c3d7" fit="contain" class="van-image-preview__image" ... > at <VanSwipeItem ref=Ref< Proxy {setOffset: ƒ, …} > class="van-image-preview__swipe-item" onTouchstartPassive=fn<onTouchStart> ... > at <Anonymous src="blob:http://127.0.0.1:3088/a4902d30-33c0-475f-8f89-0b5d0039c3d7" show=true active=0 ... > at <VanSwipe ref=Ref< Proxy {…} > lazyRender=true loop=true ... > at <BaseTransition onAfterEnter=fn<onOpened> onAfterLeave=fn<onClosed> appear=true ... > at <Transition name="van-fade" appear=true onAfterEnter=fn<onOpened> ... > at <VanPopup class="van-image-preview" overlayClass= (2) ['van-image-preview__overlay', undefined] onClosed=fn<onClosed> ... > at <VanImagePreview show=true loop=true images= (3) ['blob:http://127.0.0.1:3088/a4902d30-33c0-475f-8f89-0b5d0039c3d7', 'blob:http://127.0.0.1:3088/7caff3a6-ab81-4a99-a764-fd08bc84e606', 'blob:http://127.0.0.1:3088/8906c3aa-e041-448a-8731-0f94d9835b4f'] ... > at <App> warn2 @ runtime-core.esm-bundler.js:40 logError @ runtime-core.esm-bundler.js:214 handleError @ runtime-core.esm-bundler.js:206 callWithErrorHandling @ runtime-core.esm-bundler.js:160 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2713 flushPostFlushCbs @ runtime-core.esm-bundler.js:343 flushJobs @ runtime-core.esm-bundler.js:397 Promise.then(异步) queueFlush @ runtime-core.esm-bundler.js:282 queueJob @ runtime-core.esm-bundler.js:276 (匿名) @ runtime-core.esm-bundler.js:5743 triggerEffect @ reactivity.esm-bundler.js:397 triggerEffects @ reactivity.esm-bundler.js:387 triggerRefValue @ reactivity.esm-bundler.js:1003 (匿名) @ reactivity.esm-bundler.js:1137 triggerEffect @ reactivity.esm-bundler.js:397 triggerEffects @ reactivity.esm-bundler.js:382 trigger @ reactivity.esm-bundler.js:355 set2 @ reactivity.esm-bundler.js:526 (匿名) @ SwipeItem.mjs:65 Promise.then(异步) nextTick @ runtime-core.esm-bundler.js:244 (匿名) @ SwipeItem.mjs:64 (匿名) @ runtime-core.esm-bundler.js:2739 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2713 flushPostFlushCbs @ runtime-core.esm-bundler.js:343 flushJobs @ runtime-core.esm-bundler.js:397 Promise.then(异步) queueFlush @ runtime-core.esm-bundler.js:282 queueJob @ runtime-core.esm-bundler.js:276 (匿名) @ runtime-core.esm-bundler.js:5743 triggerEffect @ reactivity.esm-bundler.js:397 triggerEffects @ reactivity.esm-bundler.js:387 trigger @ reactivity.esm-bundler.js:355 set2 @ reactivity.esm-bundler.js:526 open @ mount-component.mjs:12 showImagePreview @ function-call.mjs:59 previewImage @ Uploader.mjs:156 onPreview @ Uploader.mjs:182 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 emit$1 @ runtime-core.esm-bundler.js:714 (匿名) @ runtime-core.esm-bundler.js:7430 onPreview @ UploaderPreviewItem.mjs:60 callWithErrorHandling @ runtime-core.esm-bundler.js:157 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166 invoker @ runtime-dom.esm-bundler.js:345 ImagePreviewItem.mjs:218

   Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'target')
at onLoad (ImagePreviewItem.mjs:218:17)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:21)
at emit$1 (runtime-core.esm-bundler.js:714:9)
at runtime-core.esm-bundler.js:7430:53
at onLoad (Image.mjs:56:9)
at Image.mjs:143:9
at runtime-core.esm-bundler.js:2739:40
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:21)

[chenjiahan]

参见 https://github.com/youzan/vant/issues/11132

[cc-qq-gg]

vue3, vant 4中遇到类似的问题，最终在template 添加根标签，问题解决 [Vue warn]: Unhandled error during execution of component event handler