feat(Image): add width and height; fix placeholder does not work

mallfoundry · Jul 21, 2024 · 7715a1e · 7715a1e
1 parent e7604b8
commit 7715a1e
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 94 deletions.
diff --git a/packages/core/src/image/README.md b/packages/core/src/image/README.md
@@ -14,10 +14,12 @@ import { Image } from "@taroify/core"
 
 ### 基础用法
 
-基础用法与原生 `img` 标签一致，可以设置 `src`、`alt` 等原生属性。
+基础用法与原生 `img` 标签一致，可以设置 `src`、`alt` 等原生属性。<br>
+通过 `width` 和 `height` 设置图片大小，若未指定，会从style中读取`width`,`height`属性。 <br>
+width和height若为number, 会经过 `pxTransform` 转换
 
 ```tsx
-<Image style={{ width: "100px", height: "100px" }} src="https://img.yzcdn.cn/vant/cat.jpeg" />
+<Image width={200} height={200} src="https://img.yzcdn.cn/vant/cat.jpeg" />
 ```
 
 ### 填充模式
@@ -26,7 +28,8 @@ import { Image } from "@taroify/core"
 
 ```tsx
 <Image
-  style={{ width: "10rem", height: "10rem" }}
+  width={200}
+  height={200}
   mode="scaleToFill"
   src="https://img.yzcdn.cn/vant/cat.jpeg"
 />
@@ -38,8 +41,9 @@ import { Image } from "@taroify/core"
 
 ```tsx
 <Image
-  round
-  style={{ width: "10rem", height: "10rem" }}
+  shape="round"
+  width={200}
+  height={200}
   src="https://img.yzcdn.cn/vant/cat.jpeg"
 />
 ```
@@ -51,25 +55,23 @@ import { Image } from "@taroify/core"
 ```tsx
 <Image
   lazyLoad
-  style={{ width: "10rem", height: "10rem" }}
+  width={200}
+  height={200}
   src="https://img.yzcdn.cn/vant/cat.jpeg"
 />
 ```
 
-### 加载中提示
+### 加载中，加载失败提示
 
-`Image` 组件提供了默认的加载中提示，支持通过 `placeholder` 插槽自定义内容。
+通过 `placeholder` 设置加载中提示，通过 `fallback`设置加载失败提示
 
 ```tsx
-<Image src="https://img.yzcdn.cn/vant/cat.jpeg" placeholder="加载中..." />
-```
-
-### 加载失败提示
+import { Photo, PhotoFail } from "@taroify/icons"
 
-`Image` 组件提供了默认的加载失败提示，支持通过 `fallback` 插槽自定义内容。
-
-```tsx
-<Image src="https://img.yzcdn.cn/vant/cat.jpeg" fallback="加载失败" />
+<Image width={200} height={200} placeholder="加载中..." />
+<Image width={200} height={200} src="error" fallback="加载失败" />
+<Image width={200} height={200} src="error" fallback={<PhotoFail />} />
+<Image width={200} height={200} placeholder={<Photo />} />
 ```
 
 ## API
@@ -79,12 +81,14 @@ import { Image } from "@taroify/core"
 | 参数          | 说明                                  | 类型          | 默认值             |
 |-------------|-------------------------------------|-------------|-----------------|
 | src         | 图片链接                                | _string_    | -               |
-| mode        | 图片填充模式                              | _string_    | `fill`          |
+| mode        | 图片填充模式                              | _string_    | `scaleToFill`          |
 | alt         | 替代文本                                | _string_    | -               |
+| width       | 宽度                                    | _string\|number_ | -  |
+| height      | 长度                                    | _string\|number_ | - | 
 | shape       | 图片形状 `square` `rounded` `circle`    | _boolean_   | -               |
 | lazyLoad    | 是否开启图片懒加载                           | _boolean_   | `false`         |
-| placeholder | 加载时提示的[图标名称](/components/icon)或图片链接 | _ReactNode_ | `<Photo />`     |
-| fallback    | 失败时提示的[图标名称](/components/icon)或图片链接 | _ReactNode_ | `<PhotoFail />` |
+| placeholder | 加载中提示 | _ReactNode_ | -     |
+| fallback    | 加载失败提示 | _ReactNode_ | - |
 
 ### Modes
 

diff --git a/packages/core/src/image/image.scss b/packages/core/src/image/image.scss
@@ -1,11 +1,6 @@
 @import "./variables";
 
 .#{$component-prefix}image {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-
   &--circle {
     overflow: hidden;
     border-radius: 50%;

diff --git a/packages/core/src/image/image.tsx b/packages/core/src/image/image.tsx
@@ -3,9 +3,11 @@ import classNames from "classnames"
 import * as _ from "lodash"
 import * as React from "react"
 import { ReactNode, useEffect, useMemo, useState, useRef } from "react"
+import { pxTransform } from "@tarojs/taro"
 import { prefixClassname } from "../styles"
 import { getLogger } from "../utils/logger"
 import { useMemoizedFn } from "../hooks"
+import mergeStyle from "../utils/merge-style"
 import ImagePlaceholder from "./image-placeholder"
 import { ImageMode, ImageShape } from "./image.shared"
 
@@ -43,7 +45,10 @@ function useImageShape(shape?: ImageShape, round?: boolean) {
 export interface ImageProps extends ViewProps {
   src?: string
   alt?: string
+  width?: string | number
+  height?: string | number
   mode?: ImageMode
+  /** @deprecated */
   round?: boolean
   shape?: ImageShape
   lazyLoad?: boolean
@@ -60,14 +65,17 @@ export default function Image(props: ImageProps) {
     className,
     src,
     alt,
+    width: widthProp,
+    height: heightProp,
     mode = "scaleToFill",
     round,
     shape: shapeProp,
     lazyLoad = false,
-    placeholder = true,
-    fallback = true,
+    placeholder = false,
+    fallback = false,
     onLoad,
     onError,
+    style: styleProp,
     ...restProps
   } = props
   const taroImageRef = useRef<any>()
@@ -76,6 +84,16 @@ export default function Image(props: ImageProps) {
   const [loading, setLoading] = useState(false)
   const [failed, setFailed] = useState(false)
   const isLoadedRef = useRef(false)
+
+  const [viewStyle, imgStyle] = useMemo(() => {
+    const width = widthProp ? typeof widthProp === "number" ? pxTransform(widthProp) : widthProp : undefined
+    const height = heightProp ? typeof heightProp === "number" ? pxTransform(heightProp) : heightProp : undefined
+    const imgStyle = mergeStyle(styleProp, {})
+    imgStyle.width = width || imgStyle.width
+    imgStyle.height = height || imgStyle.height
+    return [{ width: imgStyle.width || "100%", height: imgStyle.height || "100%", position: "relative" }, imgStyle] as const
+  }, [styleProp, widthProp, heightProp])
+
   const handleLoad = useMemoizedFn(() => {
     if (!isLoadedRef.current) {
       isLoadedRef.current = true
@@ -100,7 +118,7 @@ export default function Image(props: ImageProps) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [src])
   return (
-    <View style={{ height: "100%", width: "100%" }}>
+    <View style={viewStyle}>
       {!failed && src && (
         <TaroImage
           ref={taroImageRef}
@@ -117,44 +135,15 @@ export default function Image(props: ImageProps) {
             },
             className,
           )}
+          style={imgStyle}
           imgProps={{ alt }}
           onLoad={handleLoad}
           onError={handleError}
           {...restProps}
         />
       )}
-      {loading && placeholder && (
-        <View
-          className={classNames(
-            prefixClassname("image"),
-            {
-              [prefixClassname("image--square")]: shape === "square",
-              [prefixClassname("image--rounded")]: shape === "rounded",
-              [prefixClassname("image--circle")]: shape === "circle",
-            },
-            className,
-          )}
-          {...restProps}
-        >
-          <ImagePlaceholder prefix="placeholder" children={placeholder} />
-        </View>
-      )}
-      {failed && fallback && (
-        <View
-          className={classNames(
-            prefixClassname("image"),
-            {
-              [prefixClassname("image--square")]: shape === "square",
-              [prefixClassname("image--rounded")]: shape === "rounded",
-              [prefixClassname("image--circle")]: shape === "circle",
-            },
-            className,
-          )}
-          {...restProps}
-        >
-          <ImagePlaceholder prefix="fallback" children={fallback} />
-        </View>
-      )}
+      {loading && placeholder && <ImagePlaceholder prefix="placeholder" children={placeholder} />}
+      {failed && fallback && <ImagePlaceholder prefix="fallback" children={fallback} />}
     </View>
   )
 }
diff --git a/packages/demo/src/pages/basic/image/index.scss b/packages/demo/src/pages/basic/image/index.scss
@@ -3,6 +3,7 @@
 
 .image-demo {
   background: #fff;
+  overflow-y: auto;
 
   .#{$component-prefix}flex-item {
     margin-bottom: 10px * $hd;
@@ -15,14 +16,4 @@
     font-size: 14px * $hd;
     text-align: center;
   }
-
-  .#{$component-prefix}image {
-    width: 100%;
-    height: 27vw;
-  }
-
-  .basic-image {
-    width: 100px * $hd;
-    height: 100px * $hd;
-  }
 }
diff --git a/packages/demo/src/pages/basic/image/index.tsx b/packages/demo/src/pages/basic/image/index.tsx
@@ -15,27 +15,27 @@ export default function ImageDemo() {
     "aspectFill",
     "widthFix",
     "heightFix",
-    "top",
-    "bottom",
-    "center",
-    "left",
-    "right",
-    "topLeft",
-    "topRight",
-    "bottomLeft",
-    "bottomRight",
+    // "top",
+    // "bottom",
+    // "center",
+    // "left",
+    // "right",
+    // "topLeft",
+    // "topRight",
+    // "bottomLeft",
+    // "bottomRight",
   ]
 
   return (
     <Page title="Image 图片" className="image-demo">
       <Block title="基础用法">
-        <Image className="basic-image" src={imageUrl} />
+        <Image width={200} height={200} src={imageUrl} />
       </Block>
       <Block title="填充模式">
         <Flex wrap="wrap" gutter={20}>
           {modes.map((mode) => (
             <Flex.Item span={8} key={mode}>
-              <Image mode={mode} src={imageUrl} />
+              <Image width={200} height={200} mode={mode} src={imageUrl} />
               <Text className="text">{mode}</Text>
             </Flex.Item>
           ))}
@@ -45,33 +45,29 @@ export default function ImageDemo() {
         <Flex wrap="wrap" gutter={20}>
           {modes.map((mode) => (
             <Flex.Item span={8} key={mode}>
-              <Image mode={mode} src={imageUrl} round />
+              <Image width={200} height={200} mode={mode} src={imageUrl} round />
               <Text className="text">{mode}</Text>
             </Flex.Item>
           ))}
         </Flex>
       </Block>
-      <Block title="加载中提示">
+      <Block title="加载中,加载失败提示">
         <Flex wrap="wrap" gutter={20}>
           <Flex.Item span={8}>
-            <Image placeholder={<Photo />} />
-            <Text className="text">默认提示</Text>
+            <Image width={200} height={200} placeholder={<Photo />} />
+            <Text className="text">加载提示</Text>
           </Flex.Item>
           <Flex.Item span={8}>
-            <Image placeholder="加载中..." />
-            <Text className="text">自定义提示</Text>
+            <Image width={200} height={200} placeholder="加载中..." />
+            <Text className="text">加载提示</Text>
           </Flex.Item>
-        </Flex>
-      </Block>
-      <Block title="加载失败提示">
-        <Flex wrap="wrap" gutter={20}>
           <Flex.Item span={8}>
-            <Image src="error" fallback={<PhotoFail />} />
-            <Text className="text">默认提示</Text>
+            <Image width={200} height={200} src="error" fallback={<PhotoFail />} />
+            <Text className="text">失败提示</Text>
           </Flex.Item>
           <Flex.Item span={8}>
-            <Image src="error" fallback="加载失败" />
-            <Text className="text">自定义提示</Text>
+            <Image width={200} height={200} src="error" fallback="加载失败" />
+            <Text className="text">失败提示</Text>
           </Flex.Item>
         </Flex>
       </Block>

diff --git a/packages/demo/src/pages/display/empty/index.tsx b/packages/demo/src/pages/display/empty/index.tsx
@@ -45,6 +45,7 @@ export default function EmptyDemo() {
       <Block title="自定义图片">
         <Empty>
           <Empty.Image
+            style={{ width: 160, height: 160 }}
             className="custom-empty__image"
             src="https://img.yzcdn.cn/vant/custom-empty-image.png"
           />

diff --git a/packages/demo/src/pages/form/uploader/index.scss b/packages/demo/src/pages/form/uploader/index.scss
@@ -4,6 +4,7 @@
 
 .uploader-demo {
   background: #fff;
+  overflow-y: auto;
 
   .preview-cover {
     position: absolute;