docs: update image demo (#26962)

components/image/__tests__/__snapshots__/demo.test.js.snap

@@ -26,38 +26,48 @@ exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
 `;
 
 exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
   <div
-    class="ant-image"
-    style="width:200px"
+    class="ant-space-item"
+    style="margin-right:12px"
   >
-    <img
-      class="ant-image-img"
-      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined"
-    />
     <div
-      aria-hidden="true"
-      class="ant-image-placeholder"
+      class="ant-image"
+      style="width:200px"
     >
+      <img
+        class="ant-image-img"
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined"
+      />
       <div
-        class="ant-image"
-        style="width:200px"
+        aria-hidden="true"
+        class="ant-image-placeholder"
       >
-        <img
-          class="ant-image-img"
-          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
-        />
+        <div
+          class="ant-image"
+          style="width:200px"
+        >
+          <img
+            class="ant-image-img"
+            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+          />
+        </div>
       </div>
     </div>
-  </div>,
-  <button
-    class="ant-btn ant-btn-primary"
-    style="margin-left:10px"
-    type="button"
+  </div>
+  <div
+    class="ant-space-item"
   >
-    <span>
-      Reload
-    </span>
-  </button>,
-]
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Reload
+      </span>
+    </button>
+  </div>
+</div>
 `;

components/image/demo/placeholder.md

@@ -15,12 +15,12 @@ Progressive when large image loading.
 
 ```jsx
 import React from 'react';
-import { Image, Button } from 'antd';
+import { Image, Button, Space } from 'antd';
 
 function ImageDemo() {
   const [random, setRandom] = React.useState();
   return (
-    <>
+    <Space size={12}>
       <Image
         width={200}
         src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`}
@@ -33,16 +33,13 @@ function ImageDemo() {
       />
       <Button
         type="primary"
-        style={{
-          marginLeft: 10,
-        }}
         onClick={() => {
           setRandom(Date.now());
         }}
       >
         Reload
       </Button>
-    </>
+    </Space>
   );
 }