From a9bdbb3f4bf08e34e286991416c7a4d0eb314ac6 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 5 Aug 2022 23:43:46 +0800
Subject: [PATCH 1/6] fix: add `width` and `height` for <img />

---
 src/Image.tsx                                          |  8 +++-----
 src/Preview.tsx                                        | 10 ++++------
 ...ransPosition.tsx => getFixScaleEleTransPosition.ts} |  0
 tests/__snapshots__/basic.test.tsx.snap                |  2 ++
 tests/__snapshots__/controlled.test.tsx.snap           |  2 ++
 tests/__snapshots__/preview.test.tsx.snap              |  6 ++++++
 tests/__snapshots__/previewGroup.test.tsx.snap         |  2 ++
 7 files changed, 19 insertions(+), 11 deletions(-)
 rename src/{getFixScaleEleTransPosition.tsx => getFixScaleEleTransPosition.ts} (100%)

diff --git a/src/Image.tsx b/src/Image.tsx
index db7de1eb..49d5b294 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -237,11 +237,9 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
         <img
           {...imgCommonProps}
           ref={getImgRef}
-          {...(isError && fallback
-            ? {
-                src: fallback,
-              }
-            : { onLoad, onError, src: imgSrc })}
+          {...(isError && fallback ? { src: fallback } : { onLoad, onError, src: imgSrc })}
+          width={imgCommonProps.style.width ?? 'auto'}
+          height={imgCommonProps.style.height ?? 'auto'}
         />
 
         {status === 'loading' && (
diff --git a/src/Preview.tsx b/src/Preview.tsx
index e17cc528..12743fb0 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -322,20 +322,18 @@ const Preview: React.FC<PreviewProps> = props => {
       </ul>
       <div
         className={`${prefixCls}-img-wrapper`}
-        style={{
-          transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-        }}
+        style={{ transform: `translate3d(${position.x}px, ${position.y}px, 0)` }}
       >
         <img
+          width="auto"
+          height="auto"
           onMouseDown={onMouseDown}
           onDoubleClick={onDoubleClick}
           ref={imgRef}
           className={`${prefixCls}-img`}
           src={combinationSrc}
           alt={alt}
-          style={{
-            transform: `scale3d(${scale}, ${scale}, 1) rotate(${rotate}deg)`,
-          }}
+          style={{ transform: `scale3d(${scale}, ${scale}, 1) rotate(${rotate}deg)` }}
         />
       </div>
       {showLeftOrRightSwitches && (
diff --git a/src/getFixScaleEleTransPosition.tsx b/src/getFixScaleEleTransPosition.ts
similarity index 100%
rename from src/getFixScaleEleTransPosition.tsx
rename to src/getFixScaleEleTransPosition.ts
diff --git a/tests/__snapshots__/basic.test.tsx.snap b/tests/__snapshots__/basic.test.tsx.snap
index 57a0f4dd..fe59d923 100644
--- a/tests/__snapshots__/basic.test.tsx.snap
+++ b/tests/__snapshots__/basic.test.tsx.snap
@@ -7,7 +7,9 @@ exports[`Basic snapshot 1`] = `
 >
   <img
     class="rc-image-img"
+    height="auto"
     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    width="auto"
   />
 </div>
 `;
diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap
index c1f6669e..0a3c12fb 100644
--- a/tests/__snapshots__/controlled.test.tsx.snap
+++ b/tests/__snapshots__/controlled.test.tsx.snap
@@ -42,8 +42,10 @@ exports[`Controlled With previewVisible 1`] = `
       >
         <img
           class="rc-image-preview-img"
+          height="auto"
           src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
           style="transform: scale3d(1, 1, 1) rotate(0deg);"
+          width="auto"
         />
       </div>
     </div>
diff --git a/tests/__snapshots__/preview.test.tsx.snap b/tests/__snapshots__/preview.test.tsx.snap
index 8937e730..3d9c3021 100644
--- a/tests/__snapshots__/preview.test.tsx.snap
+++ b/tests/__snapshots__/preview.test.tsx.snap
@@ -6,7 +6,9 @@ exports[`Preview add rootClassName should be correct 1`] = `
 >
   <img
     class="rc-image-img"
+    height="auto"
     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    width="auto"
   />
 </div>
 `;
@@ -19,7 +21,9 @@ Array [
     >
       <img
         class="rc-image-img"
+        height="auto"
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        width="auto"
       />
     </div>
   </div>,
@@ -75,8 +79,10 @@ Array [
               >
                 <img
                   class="rc-image-preview-img"
+                  height="auto"
                   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                   style="transform: scale3d(1, 1, 1) rotate(0deg);"
+                  width="auto"
                 />
               </div>
             </div>
diff --git a/tests/__snapshots__/previewGroup.test.tsx.snap b/tests/__snapshots__/previewGroup.test.tsx.snap
index bdf422f1..827b3e00 100644
--- a/tests/__snapshots__/previewGroup.test.tsx.snap
+++ b/tests/__snapshots__/previewGroup.test.tsx.snap
@@ -42,8 +42,10 @@ exports[`PreviewGroup With Controlled 1`] = `
       >
         <img
           class="rc-image-preview-img"
+          height="auto"
           src="src1"
           style="transform: scale3d(1, 1, 1) rotate(0deg);"
+          width="auto"
         />
       </div>
     </div>

From aca919f31572ec499ca5457190827c10f2c1970a Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sat, 6 Aug 2022 02:40:02 +0800
Subject: [PATCH 2/6] fix: add `width` and `height` for <img />

---
 src/Image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Image.tsx b/src/Image.tsx
index 49d5b294..272e8ebb 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -238,8 +238,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
           {...imgCommonProps}
           ref={getImgRef}
           {...(isError && fallback ? { src: fallback } : { onLoad, onError, src: imgSrc })}
-          width={imgCommonProps.style.width ?? 'auto'}
-          height={imgCommonProps.style.height ?? 'auto'}
+          width={imgCommonProps.style.width ?? 100}
+          height={imgCommonProps.style.height ?? 100}
         />
 
         {status === 'loading' && (

From 35b99355961e705b1f8fa543db26f5721ea7f32f Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sat, 6 Aug 2022 02:40:46 +0800
Subject: [PATCH 3/6] fix: add `width` and `height` for <img />

---
 src/Image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Image.tsx b/src/Image.tsx
index 272e8ebb..49d5b294 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -238,8 +238,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
           {...imgCommonProps}
           ref={getImgRef}
           {...(isError && fallback ? { src: fallback } : { onLoad, onError, src: imgSrc })}
-          width={imgCommonProps.style.width ?? 100}
-          height={imgCommonProps.style.height ?? 100}
+          width={imgCommonProps.style.width ?? 'auto'}
+          height={imgCommonProps.style.height ?? 'auto'}
         />
 
         {status === 'loading' && (

From 9a51063a2f34dd7e8432c4951b7bcd7a63c1f2e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com>
Date: Mon, 8 Aug 2022 10:18:26 +0800
Subject: [PATCH 4/6] fix: remove imgCommonProps.style

---
 src/Image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Image.tsx b/src/Image.tsx
index 49d5b294..358589ed 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -238,8 +238,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
           {...imgCommonProps}
           ref={getImgRef}
           {...(isError && fallback ? { src: fallback } : { onLoad, onError, src: imgSrc })}
-          width={imgCommonProps.style.width ?? 'auto'}
-          height={imgCommonProps.style.height ?? 'auto'}
+          width={width ?? 'auto'}
+          height={height ?? 'auto'}
         />
 
         {status === 'loading' && (

From e79febb08976ea16e6e1ebe15c088d442de7f42d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com>
Date: Mon, 8 Aug 2022 10:20:01 +0800
Subject: [PATCH 5/6] fix: update test.snap

---
 tests/__snapshots__/basic.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/__snapshots__/basic.test.tsx.snap b/tests/__snapshots__/basic.test.tsx.snap
index fe59d923..903c235c 100644
--- a/tests/__snapshots__/basic.test.tsx.snap
+++ b/tests/__snapshots__/basic.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Basic snapshot 1`] = `
     class="rc-image-img"
     height="auto"
     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    width="auto"
+    width="200"
   />
 </div>
 `;

From 165ac9f9cae7e2fa6779fcc311a0019e167bf122 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ckonghai=E2=80=9D?= <574980606@qq.com>
Date: Mon, 8 Aug 2022 14:04:18 +0800
Subject: [PATCH 6/6] fix: update test.snap

---
 src/Image.tsx                                  | 4 ++--
 src/Preview.tsx                                | 4 ++--
 tests/__snapshots__/basic.test.tsx.snap        | 1 -
 tests/__snapshots__/controlled.test.tsx.snap   | 2 --
 tests/__snapshots__/preview.test.tsx.snap      | 6 ------
 tests/__snapshots__/previewGroup.test.tsx.snap | 2 --
 6 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/Image.tsx b/src/Image.tsx
index 358589ed..54850781 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -238,8 +238,8 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
           {...imgCommonProps}
           ref={getImgRef}
           {...(isError && fallback ? { src: fallback } : { onLoad, onError, src: imgSrc })}
-          width={width ?? 'auto'}
-          height={height ?? 'auto'}
+          width={width}
+          height={height}
         />
 
         {status === 'loading' && (
diff --git a/src/Preview.tsx b/src/Preview.tsx
index 12743fb0..705df511 100644
--- a/src/Preview.tsx
+++ b/src/Preview.tsx
@@ -325,8 +325,8 @@ const Preview: React.FC<PreviewProps> = props => {
         style={{ transform: `translate3d(${position.x}px, ${position.y}px, 0)` }}
       >
         <img
-          width="auto"
-          height="auto"
+          width={props.width}
+          height={props.height}
           onMouseDown={onMouseDown}
           onDoubleClick={onDoubleClick}
           ref={imgRef}
diff --git a/tests/__snapshots__/basic.test.tsx.snap b/tests/__snapshots__/basic.test.tsx.snap
index 903c235c..2c4974d0 100644
--- a/tests/__snapshots__/basic.test.tsx.snap
+++ b/tests/__snapshots__/basic.test.tsx.snap
@@ -7,7 +7,6 @@ exports[`Basic snapshot 1`] = `
 >
   <img
     class="rc-image-img"
-    height="auto"
     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
     width="200"
   />
diff --git a/tests/__snapshots__/controlled.test.tsx.snap b/tests/__snapshots__/controlled.test.tsx.snap
index 0a3c12fb..c1f6669e 100644
--- a/tests/__snapshots__/controlled.test.tsx.snap
+++ b/tests/__snapshots__/controlled.test.tsx.snap
@@ -42,10 +42,8 @@ exports[`Controlled With previewVisible 1`] = `
       >
         <img
           class="rc-image-preview-img"
-          height="auto"
           src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
           style="transform: scale3d(1, 1, 1) rotate(0deg);"
-          width="auto"
         />
       </div>
     </div>
diff --git a/tests/__snapshots__/preview.test.tsx.snap b/tests/__snapshots__/preview.test.tsx.snap
index 3d9c3021..8937e730 100644
--- a/tests/__snapshots__/preview.test.tsx.snap
+++ b/tests/__snapshots__/preview.test.tsx.snap
@@ -6,9 +6,7 @@ exports[`Preview add rootClassName should be correct 1`] = `
 >
   <img
     class="rc-image-img"
-    height="auto"
     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    width="auto"
   />
 </div>
 `;
@@ -21,9 +19,7 @@ Array [
     >
       <img
         class="rc-image-img"
-        height="auto"
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-        width="auto"
       />
     </div>
   </div>,
@@ -79,10 +75,8 @@ Array [
               >
                 <img
                   class="rc-image-preview-img"
-                  height="auto"
                   src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                   style="transform: scale3d(1, 1, 1) rotate(0deg);"
-                  width="auto"
                 />
               </div>
             </div>
diff --git a/tests/__snapshots__/previewGroup.test.tsx.snap b/tests/__snapshots__/previewGroup.test.tsx.snap
index 827b3e00..bdf422f1 100644
--- a/tests/__snapshots__/previewGroup.test.tsx.snap
+++ b/tests/__snapshots__/previewGroup.test.tsx.snap
@@ -42,10 +42,8 @@ exports[`PreviewGroup With Controlled 1`] = `
       >
         <img
           class="rc-image-preview-img"
-          height="auto"
           src="src1"
           style="transform: scale3d(1, 1, 1) rotate(0deg);"
-          width="auto"
         />
       </div>
     </div>