diff --git a/example/app.json b/example/app.json
index d29f3e0b..53fe3770 100644
--- a/example/app.json
+++ b/example/app.json
@@ -93,6 +93,7 @@
"van-icon": "./dist/icon/index",
"van-icon-demo": "./dist/icon/demo/index",
"van-image": "./dist/image/index",
+ "van-image-demo": "./dist/image/demo/index",
"van-loading": "./dist/loading/index",
"van-nav-bar": "./dist/nav-bar/index",
"van-notice-bar": "./dist/notice-bar/index",
diff --git a/example/pages/image/index.js b/example/pages/image/index.js
index ac83a492..cc11dfda 100644
--- a/example/pages/image/index.js
+++ b/example/pages/image/index.js
@@ -1,16 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- fits: [
- 'contain',
- 'cover',
- 'fill',
- 'none',
- 'scale-down',
- 'widthFix',
- 'heightFix'
- ],
- src: 'https://img.yzcdn.cn/vant/cat.jpeg'
- }
-});
+Page();
diff --git a/example/pages/image/index.wxml b/example/pages/image/index.wxml
index 4fe193a0..127c3598 100644
--- a/example/pages/image/index.wxml
+++ b/example/pages/image/index.wxml
@@ -1,103 +1 @@
-
-
-
-
-
-
-
-
-
-
-
- {{ fit }}
-
-
-
-
-
-
-
-
- {{ fit }}
-
-
-
-
-
-
-
-
- 默认提示
-
-
-
-
-
-
- 自定义提示
-
-
-
-
-
-
-
-
- 默认提示
-
-
-
-
- 加载失败
-
- 自定义提示
-
-
-
-
+
diff --git a/packages/image/demo/index.json b/packages/image/demo/index.json
new file mode 100644
index 00000000..0230677a
--- /dev/null
+++ b/packages/image/demo/index.json
@@ -0,0 +1,10 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-row": "../../row/index",
+ "van-col": "../../col/index",
+ "van-image": "../../image/index",
+ "van-loading": "../../loading/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/image/index.wxss b/packages/image/demo/index.less
similarity index 74%
rename from example/pages/image/index.wxss
rename to packages/image/demo/index.less
index d5bcdf70..1f81648f 100644
--- a/example/pages/image/index.wxss
+++ b/packages/image/demo/index.less
@@ -1,7 +1,3 @@
-page {
- background-color: #fff;
-}
-
.text {
width: 100%;
margin: 5px 0 20px;
diff --git a/packages/image/demo/index.ts b/packages/image/demo/index.ts
new file mode 100644
index 00000000..7ab09354
--- /dev/null
+++ b/packages/image/demo/index.ts
@@ -0,0 +1,16 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ fits: [
+ 'contain',
+ 'cover',
+ 'fill',
+ 'none',
+ 'scale-down',
+ 'widthFix',
+ 'heightFix',
+ ],
+ src: 'https://img.yzcdn.cn/vant/cat.jpeg',
+ },
+});
diff --git a/packages/image/demo/index.wxml b/packages/image/demo/index.wxml
new file mode 100644
index 00000000..c338bbd7
--- /dev/null
+++ b/packages/image/demo/index.wxml
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+
+
+
+ {{ fit }}
+
+
+
+
+
+
+
+
+ {{ fit }}
+
+
+
+
+
+
+
+
+ 默认提示
+
+
+
+
+
+
+ 自定义提示
+
+
+
+
+
+
+
+
+ 默认提示
+
+
+
+
+ 加载失败
+
+ 自定义提示
+
+
+
diff --git a/packages/image/test/__snapshots__/demo.spec.ts.snap b/packages/image/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..aaae298c
--- /dev/null
+++ b/packages/image/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,926 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 填充模式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ contain
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ cover
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fill
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ none
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ scale-down
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ widthFix
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ heightFix
+
+
+
+
+
+
+
+
+
+
+ 圆形图片
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ contain
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ cover
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fill
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ none
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ scale-down
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ widthFix
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ heightFix
+
+
+
+
+
+
+
+
+
+
+ 加载中提示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 默认提示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义提示
+
+
+
+
+
+
+
+
+
+
+ 加载失败提示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 默认提示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义提示
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/image/test/demo.spec.ts b/packages/image/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/image/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});