fix: bug #678

packages/react-vant/src/components/image-preview/ImagePreview.tsx

@@ -52,6 +52,7 @@ const ImagePreview = React.forwardRef<ImagePreviewRef, ImagePreviewProps>(
             defaultIndex={props.startPosition}
             onIndexChange={onSwipeChange}
             images={props.images}
+            lazyload={props.lazyload}
             onTap={() => {
               if (!props.closeOnlyClickCloseIcon) {
                 onClose()

packages/react-vant/src/components/image-preview/slide.tsx

@@ -5,10 +5,14 @@ import { bound } from '../utils/bound'
 import { rubberbandIfOutOfBounds } from '../utils/rubberband'
 import clsx from 'clsx'
 import { createNamespace } from '../utils'
+import { LazyImageType } from '../image/PropsType'
+import { getLazyImagePlaceholder } from '../image/LazyImage'
+import Lazyload from '../lazyload'
 
 type Props = {
   image: string
   maxZoom: number
+  lazyload?: LazyImageType
   onTap: () => void
   onZoomChange?: (zoom: number) => void
   dragLockRef?: MutableRefObject<boolean>
@@ -145,6 +149,12 @@ export const Slide: FC<Props> = props => {
     }
   )
 
+  const { lazyload } = props
+  const renderPlaceholder = () => {
+    if (typeof lazyload === 'boolean') return getLazyImagePlaceholder(bem)
+    return lazyload.placeholder || getLazyImagePlaceholder(bem)
+  }
+
   return (
     <div
       className={clsx(bem('slide'))}
@@ -163,12 +173,23 @@ export const Slide: FC<Props> = props => {
             scale: zoom,
           }}
         >
-          <img
-            ref={imgRef}
-            src={props.image}
-            draggable={false}
-            alt={props.image}
-          />
+          {props.lazyload ? (
+            <Lazyload placeholder={renderPlaceholder()}>
+              <img
+                ref={imgRef}
+                src={props.image}
+                draggable={false}
+                alt={props.image}
+              />
+            </Lazyload>
+          ) : (
+            <img
+              ref={imgRef}
+              src={props.image}
+              draggable={false}
+              alt={props.image}
+            />
+          )}
         </animated.div>
       </div>
     </div>

packages/react-vant/src/components/image-preview/slides.tsx

@@ -6,12 +6,14 @@ import { bound } from '../utils/bound'
 import { createNamespace, unitToPx } from '../utils'
 import clsx from 'clsx'
 import { useUpdateEffect } from '../hooks'
+import { LazyImageType } from '../image/PropsType'
 
 export type SlidesType = {
   images: string[]
   onTap: () => void
   maxZoom: number
   defaultIndex: number
+  lazyload?: LazyImageType
   onIndexChange?: (index: number) => void
 }
 
@@ -98,6 +100,7 @@ export const Slides = forwardRef<SlidesRef, SlidesType>((props, ref) => {
             image={image}
             onTap={props.onTap}
             maxZoom={props.maxZoom}
+            lazyload={props.lazyload}
             onZoomChange={zoom => {
               if (zoom !== 1) {
                 const index: number = Math.round(x.get() / slideWidth)