diff --git a/src/components/BasicShop/BasicComponents/Image/index.tsx b/src/components/BasicShop/BasicComponents/Image/index.tsx
index d0c98ce..5a7e684 100644
--- a/src/components/BasicShop/BasicComponents/Image/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Image/index.tsx
@@ -3,17 +3,45 @@ import { IImageConfig } from './schema';
 const Image = memo((props: IImageConfig) => {
   const { imgUrl, round = 0 } = props;
   return (
-    <div
-      style={{
-        borderRadius: round,
-        width: '100%',
-        textAlign: 'center',
-        overflow: 'hidden',
-        position: 'absolute',
-      }}
-    >
-      <img src={imgUrl && imgUrl[0].url} alt="" style={{ width: '100%' }} />
-    </div>
+    <>
+      {props.isTpl && (
+        <div
+          style={{
+            borderRadius: round,
+            width: '100%',
+            textAlign: 'center',
+            overflow: 'hidden',
+          }}
+        >
+          <img src={imgUrl && imgUrl[0].url} alt="" style={{ width: '100%' }} />
+        </div>
+      )}
+      {!props.isTpl && (
+        <div
+          style={{
+            overflow: 'hidden',
+            position: 'absolute',
+            width: `${props.baseWidth}%`,
+            height: `${props.baseHeight}%`,
+            borderRadius: props.baseRadius,
+            transform: `translate(${props.baseLeft}px,${props.baseTop}px) 
+      scale(${props.baseScale / 100}) 
+      rotate(${props.baseRotate}deg)`,
+          }}
+        >
+          <div
+            style={{
+              borderRadius: round,
+              width: '100%',
+              textAlign: 'center',
+              overflow: 'hidden',
+            }}
+          >
+            <img src={imgUrl && imgUrl[0].url} alt="" style={{ width: '100%' }} />
+          </div>
+        </div>
+      )}
+    </>
   );
 });