From 874cccc99183352928c63405ae13b71b1718a40b Mon Sep 17 00:00:00 2001
From: 3lang <675483520@qq.com>
Date: Thu, 29 Jul 2021 22:22:29 +0800
Subject: [PATCH] fix: flex container

---
 package.json               |  2 +-
 src/flex/style/index.less  |  4 ++--
 src/image/PropsType.ts     |  1 +
 src/image/index.tsx        | 17 +++++++++--------
 src/image/style/index.less |  6 ++++++
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 813c7ed46..ff9befc19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-vant",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "React Mobile UI Components base on Vant UI",
   "repository": "https://github.com/3lang3/react-vant.git",
   "main": "lib/index.js",
diff --git a/src/flex/style/index.less b/src/flex/style/index.less
index 3c158ad4d..c8632a4e7 100644
--- a/src/flex/style/index.less
+++ b/src/flex/style/index.less
@@ -19,10 +19,10 @@
     &-end {
       justify-content: flex-end;
     }
-    &-space-between {
+    &-between {
       justify-content: space-between;
     }
-    &-space-around {
+    &-around {
       justify-content: space-around;
     }
   }
diff --git a/src/image/PropsType.ts b/src/image/PropsType.ts
index 6a9582ca5..9be4b4fb8 100644
--- a/src/image/PropsType.ts
+++ b/src/image/PropsType.ts
@@ -8,6 +8,7 @@ export interface ImageProps extends BaseTypeProps {
   alt?: string;
   fit?: ImageFit;
   round?: boolean;
+  block?: boolean;
   width?: number | string;
   height?: number | string;
   radius?: number | string;
diff --git a/src/image/index.tsx b/src/image/index.tsx
index 96524e8b3..34795c47c 100644
--- a/src/image/index.tsx
+++ b/src/image/index.tsx
@@ -13,9 +13,10 @@ const Image: React.FC<ImageProps> = (props) => {
     loadingIcon = 'photo',
     showError = true,
     showLoading = true,
+    block = true,
   } = props;
   const [status, setStatus] = useState({ loading: true, error: false });
-  const mountedRef = useRef(false)
+  const mountedRef = useRef(false);
 
   const style = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -39,24 +40,24 @@ const Image: React.FC<ImageProps> = (props) => {
 
   useEffect(() => {
     if (!mountedRef.current) {
-      mountedRef.current = true
-      return
+      mountedRef.current = true;
+      return;
     }
     setStatus({ error: false, loading: false });
   }, [props.src]);
 
   const onLoad = (e) => {
     setStatus((v) => ({ ...v, loading: false }));
-    props.onLoad?.(e)
+    props.onLoad?.(e);
   };
 
   const onError = (e) => {
     setStatus({ error: true, loading: false });
-    props.onLoad?.(e)
+    props.onLoad?.(e);
   };
 
   const renderLoadingIcon = () => {
-    if (typeof loadingIcon !== 'string') return loadingIcon
+    if (typeof loadingIcon !== 'string') return loadingIcon;
     return (
       <Icon
         size={props.iconSize}
@@ -68,7 +69,7 @@ const Image: React.FC<ImageProps> = (props) => {
   };
 
   const renderErrorIcon = () => {
-    if (typeof errorIcon !== 'string') return errorIcon
+    if (typeof errorIcon !== 'string') return errorIcon;
     return (
       <Icon
         size={props.iconSize}
@@ -107,7 +108,7 @@ const Image: React.FC<ImageProps> = (props) => {
   };
 
   return (
-    <div className={classnames(bem({ round: props.round }))} style={style}>
+    <div className={classnames(bem({ block, round: props.round }))} style={style}>
       {renderImage()}
       {renderPlaceholder()}
       {props.children}
diff --git a/src/image/style/index.less b/src/image/style/index.less
index 80eafae64..f7a00d501 100644
--- a/src/image/style/index.less
+++ b/src/image/style/index.less
@@ -4,6 +4,12 @@
   position: relative;
   display: inline-block;
 
+  &--block {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
   &--round {
     overflow: hidden;
     border-radius: 50%;