feat(image): add preview prop (#939)

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-timeline` add `horizontal` prop, closes [#887](https://github.com/TuSimple/naive-ui/issues/887).
+- `n-image` add `preview-src` prop, closes [#922](https://github.com/TuSimple/naive-ui/issues/922)
 - `n-dynamic-tags` add `input` and `add` slot, closes [#499](https://github.com/TuSimple/naive-ui/issues/499).
 
 ### Fixes

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-timeline` 新增 `horizontal` 属性，关闭 [#887](https://github.com/TuSimple/naive-ui/issues/887)
+- `n-image` 新增 `preview-src` 属性，关闭 [#922](https://github.com/TuSimple/naive-ui/issues/922)
 - `n-dynamic-tags` 新增 `input` 和 `add` 插槽，关闭 [#499](https://github.com/TuSimple/naive-ui/issues/499)
 
 ### Fixes

src/image/demos/enUS/index.demo-entry.md

@@ -19,6 +19,7 @@ group
 | height | `string \| number` | `undefined` | Image height. |
 | img-props | `object` | `undefined` | The props of the img element inside the component. |
 | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `fill` | Object-fit type of the image in the container. |
+| preview-src | `string` | `undefined` | Source of preview image. |
 | show-toolbar | `boolean` | `true` | Whether to show the bottom toolbar when the image enlarge. |
 | src | `string` | `undefined` | Image source. |
 | width | `string \| number` | `undefined` | Image width. |

src/image/demos/zhCN/index.demo-entry.md

@@ -19,6 +19,7 @@ group
 | height | `string \| number` | `undefined` | 图片高度 |
 | img-props | `object` | `undefined` | 组件中 img 元素的属性 |
 | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `fill` | 图片在容器内的的适应类型 |
+| preview-src | `string` | `undefined` | 预览图片的图片地址 |
 | show-toolbar | `boolean` | `true` | 图片放大后是否展示底部工具栏 |
 | src | `string` | `undefined` | 图片来源 |
 | width | `string \| number` | `undefined` | 图片宽度 |

src/image/src/Image.tsx

@@ -35,6 +35,7 @@ const imageProps = {
     >,
     default: 'fill'
   },
+  previewSrc: String,
   width: [String, Number] as PropType<string | number>,
   src: String,
   showToolbar: { type: Boolean, default: true },
@@ -61,14 +62,14 @@ export default defineComponent({
       imgProps: imgPropsRef,
       handleClick: () => {
         if (imageGroupHandle) {
-          imageGroupHandle.setPreviewSrc(props.src)
+          imageGroupHandle.setPreviewSrc(props.previewSrc || props.src)
           imageGroupHandle.setThumbnailEl(imageRef.value)
           imageGroupHandle.toggleShow()
           return
         }
         const { value: previewInst } = previewInstRef
         if (!previewInst) return
-        previewInst.setPreviewSrc(props.src)
+        previewInst.setPreviewSrc(props.previewSrc || props.src)
         previewInst.setThumbnailEl(imageRef.value)
         previewInst.toggleShow()
       }
@@ -87,14 +88,15 @@ export default defineComponent({
         {...imgProps}
         class={this.groupId}
         ref="imageRef"
-        width={this.width ? this.width : imgProps.width}
-        height={this.height ? this.height : imgProps.height}
-        src={this.src ? this.src : imgProps.src}
-        alt={this.alt ? this.alt : imgProps.alt}
-        aria-label={this.alt ? this.alt : imgProps.alt}
+        width={this.width || imgProps.width}
+        height={this.height || imgProps.height}
+        src={this.src || imgProps.src}
+        alt={this.alt || imgProps.alt}
+        aria-label={this.alt || imgProps.alt}
         onClick={this.handleClick}
         onError={this.onError}
         style={{ objectFit: this.objectFit }}
+        data-preview-src={this.previewSrc || this.src}
       />
     )
 

src/image/src/ImageGroup.tsx

@@ -43,12 +43,17 @@ export default defineComponent({
       const imgs = container.getElementsByClassName(
         groupId
       ) as HTMLCollectionOf<HTMLImageElement>
+
       if (!imgs.length) return
-      const index = Array.from(imgs).findIndex((img) => img.src === currentSrc)
+      const index = Array.from(imgs).findIndex(
+        (img) => img.dataset.previewSrc === currentSrc
+      )
       if (~index) {
-        setPreviewSrc(imgs[(index + step + imgs.length) % imgs.length].src)
+        setPreviewSrc(
+          imgs[(index + step + imgs.length) % imgs.length].dataset.previewSrc
+        )
       } else {
-        setPreviewSrc(imgs[0].src)
+        setPreviewSrc(imgs[0].dataset.previewSrc)
       }
     }
     provide(imageGroupInjectionKey, {