diff --git a/src/image/test/__snapshots__/index.legacy.js.snap b/src/image/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index 6fae403fe..000000000
--- a/src/image/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,72 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`apply icon-prefix prop to error-icon 1`] = `
-<div class="van-image">
-  <div class="van-image__error"><i class="my-icon my-icon-error van-image__error-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`apply icon-prefix prop to loading-icon 1`] = `
-<div class="van-image"><img class="van-image__img">
-  <div class="van-image__loading"><i class="my-icon my-icon-success van-image__loading-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`default slot 1`] = `
-<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-      <!----></i></div>Custom Default
-</div>
-`;
-
-exports[`error-icon prop 1`] = `
-<div class="van-image">
-  <div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`lazy load 1`] = `
-<div class="van-image"><img class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`lazy-load error event 1`] = `
-<div class="van-image">
-  <div class="van-image__error"><i class="van-icon van-icon-photo-fail van-image__error-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`lazy-load load event 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
-
-exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>`;
-
-exports[`load event 2`] = `
-<div class="van-image"><img src="" class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`loading-icon prop 1`] = `
-<div class="van-image"><img class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-success van-image__loading-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`radius prop 1`] = `
-<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
-      <!----></i></div>
-</div>
-`;
-
-exports[`show-error prop 1`] = `<div class="van-image"></div>`;
-
-exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
diff --git a/src/image/test/__snapshots__/index.spec.js.snap b/src/image/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..929d386f2
--- /dev/null
+++ b/src/image/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should apply icon-prefix prop to error-icon 1`] = `
+<i class="van-badge__wrapper my-icon my-icon-error van-image__error-icon">
+</i>
+`;
+
+exports[`should apply icon-prefix prop to loading-icon 1`] = `
+<i class="van-badge__wrapper my-icon my-icon-success van-image__loading-icon">
+</i>
+`;
+
+exports[`should emit load event after image loaded 1`] = `
+<div class="van-image">
+  <img src="https://img.com"
+       class="van-image__img"
+  >
+</div>
+`;
+
+exports[`should render default slot correctly 1`] = `
+<div class="van-image">
+  <img src="https://img.com"
+       class="van-image__img"
+  >
+  <div class="van-image__loading">
+    <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+    </i>
+  </div>
+  Custom Default
+</div>
+`;
+
+exports[`should render loading placeholder when using lazy-load prop 1`] = `
+<div class="van-image">
+  <img class="van-image__img">
+  <div class="van-image__loading">
+    <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+    </i>
+  </div>
+</div>
+`;
+
+exports[`should watch src and reset 1`] = `
+<div class="van-image">
+  <div class="van-image__loading">
+    <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
+    </i>
+  </div>
+</div>
+`;
diff --git a/src/image/test/index.legacy.js b/src/image/test/index.legacy.js
deleted file mode 100644
index 1e2c79290..000000000
--- a/src/image/test/index.legacy.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { mount } from '@vue/test-utils';
-import VanImage from '..';
-
-test('click event', () => {
-  const wrapper = mount(VanImage);
-
-  wrapper.trigger('click');
-  expect(wrapper.emitted('click')[0][0]).toBeTruthy();
-  wrapper.unmount();
-});
-
-test('load event', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-  });
-
-  wrapper.find('img').trigger('load');
-
-  expect(wrapper.emitted('load')[0][0]).toBeTruthy();
-  expect(wrapper.html()).toMatchSnapshot();
-
-  wrapper.setProps({ src: '' });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('error event', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-  });
-
-  wrapper.find('img').trigger('error');
-
-  expect(wrapper.emitted('error')[0][0]).toBeTruthy();
-});
-
-test('lazy load', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-      lazyLoad: true,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('lazy-load load event', (done) => {
-  const wrapper = mount(VanImage, {
-    props: {
-      lazyLoad: true,
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-    mocks: {
-      $Lazyload: {
-        $on(eventName, hanlder) {
-          if (eventName === 'loaded') {
-            setTimeout(() => {
-              hanlder({ el: null });
-              hanlder({ el: wrapper.find('img').element });
-              expect(wrapper.emitted('load').length).toEqual(1);
-              expect(wrapper.html()).toMatchSnapshot();
-              wrapper.unmount();
-            });
-          }
-        },
-        $off() {
-          done();
-        },
-      },
-    },
-  });
-});
-
-test('lazy-load error event', (done) => {
-  const wrapper = mount(VanImage, {
-    props: {
-      lazyLoad: true,
-    },
-    mocks: {
-      $Lazyload: {
-        $on(eventName, hanlder) {
-          if (eventName === 'error') {
-            setTimeout(() => {
-              hanlder({ el: null });
-              hanlder({ el: wrapper.find('img').element });
-              expect(wrapper.emitted('error').length).toEqual(1);
-              expect(wrapper.html()).toMatchSnapshot();
-              wrapper.unmount();
-            });
-          }
-        },
-        $off() {
-          done();
-        },
-      },
-    },
-  });
-});
-
-test('show-loading prop', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      showLoading: false,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('show-error prop', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      showError: false,
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-  });
-
-  wrapper.find('img').trigger('error');
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('error-icon prop', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      errorIcon: 'error',
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-  });
-
-  wrapper.find('img').trigger('error');
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('loading-icon prop', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      loadingIcon: 'success',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('apply icon-prefix prop to error-icon', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      errorIcon: 'error',
-      iconPrefix: 'my-icon',
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-  });
-
-  wrapper.find('img').trigger('error');
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('apply icon-prefix prop to loading-icon', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      loadingIcon: 'success',
-      iconPrefix: 'my-icon',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('radius prop', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      radius: 3,
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('default slot', () => {
-  const wrapper = mount(VanImage, {
-    props: {
-      src: 'https://img.yzcdn.cn/vant/cat.jpeg',
-    },
-    slots: {
-      default: () => 'Custom Default',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/image/test/index.spec.js b/src/image/test/index.spec.js
new file mode 100644
index 000000000..49481d3ce
--- /dev/null
+++ b/src/image/test/index.spec.js
@@ -0,0 +1,208 @@
+import { mount } from '@vue/test-utils';
+import VanImage from '..';
+import Lazyload from '../../lazyload';
+
+const IMAGE_URL = 'https://img.com';
+
+test('should emit load event after image loaded', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+    },
+  });
+
+  await wrapper.find('img').trigger('load');
+
+  expect(wrapper.emitted('load')[0][0]).toBeTruthy();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should watch src and reset', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+    },
+  });
+
+  await wrapper.find('img').trigger('load');
+  await wrapper.setProps({ src: '' });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should emit error event when load image failed', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+    },
+  });
+
+  wrapper.find('img').trigger('error');
+  expect(wrapper.emitted('error')[0][0]).toBeTruthy();
+});
+
+test('should render loading placeholder when using lazy-load prop', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+      lazyLoad: true,
+    },
+    global: {
+      plugins: [Lazyload],
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should not render loading placeholder when show-loading prop is false', async () => {
+  const wrapper = mount(VanImage);
+  expect(wrapper.find('.van-image__loading').exists()).toBeTruthy();
+
+  await wrapper.setProps({
+    showLoading: false,
+  });
+  expect(wrapper.find('.van-image__loading').exists()).toBeFalsy();
+});
+
+test('should not render error placeholder when show-error prop is false', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+    },
+  });
+
+  await wrapper.find('img').trigger('error');
+  expect(wrapper.find('.van-image__error').exists()).toBeTruthy();
+
+  await wrapper.setProps({
+    showError: false,
+  });
+  expect(wrapper.find('.van-image__error').exists()).toBeFalsy();
+});
+
+test('should change error icon when using error-icon prop', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      errorIcon: 'error',
+      src: IMAGE_URL,
+    },
+  });
+
+  await wrapper.find('img').trigger('error');
+  expect(wrapper.find('.van-icon-error').exists()).toBeTruthy();
+});
+
+test('should change loading icon when using loading-icon prop', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      loadingIcon: 'success',
+    },
+  });
+
+  expect(wrapper.find('.van-icon-success').exists()).toBeTruthy();
+});
+
+test('should apply icon-prefix prop to error-icon', async () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      errorIcon: 'error',
+      iconPrefix: 'my-icon',
+      src: IMAGE_URL,
+    },
+  });
+
+  await wrapper.find('img').trigger('error');
+  expect(wrapper.find('.van-image__error-icon').html()).toMatchSnapshot();
+});
+
+test('should apply icon-prefix prop to loading-icon', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      loadingIcon: 'success',
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  expect(wrapper.find('.van-image__loading-icon').html()).toMatchSnapshot();
+});
+
+test('should change border radius when using border-radius prop', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      radius: 3,
+    },
+  });
+
+  expect(wrapper.element.style.overflow).toEqual('hidden');
+  expect(wrapper.element.style.borderRadius).toEqual('3px');
+});
+
+test('should render default slot correctly', () => {
+  const wrapper = mount(VanImage, {
+    props: {
+      src: IMAGE_URL,
+    },
+    slots: {
+      default: () => 'Custom Default',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+// TODO
+// test('should emit load event when using lazy-load prop and image loaded', (done) => {
+//   const wrapper = mount(VanImage, {
+//     props: {
+//       lazyLoad: true,
+//       src: IMAGE_URL,
+//     },
+//     global: {
+//       mocks: {
+//         $Lazyload: {
+//           $on(eventName, hanlder) {
+//             console.log('on ', eventName);
+//             if (eventName === 'loaded') {
+//               setTimeout(() => {
+//                 hanlder({ el: null });
+//                 hanlder({ el: wrapper.find('img').element });
+//                 expect(wrapper.emitted('load').length).toEqual(1);
+//                 expect(wrapper.html()).toMatchSnapshot();
+//                 wrapper.unmount();
+//               });
+//             }
+//           },
+//           $off() {
+//             done();
+//           },
+//         },
+//       },
+//     },
+//   });
+// });
+
+// test('lazy-load error event', (done) => {
+//   const wrapper = mount(VanImage, {
+//     props: {
+//       lazyLoad: true,
+//     },
+//     mocks: {
+//       $Lazyload: {
+//         $on(eventName, hanlder) {
+//           if (eventName === 'error') {
+//             setTimeout(() => {
+//               hanlder({ el: null });
+//               hanlder({ el: wrapper.find('img').element });
+//               expect(wrapper.emitted('error').length).toEqual(1);
+//               expect(wrapper.html()).toMatchSnapshot();
+//               wrapper.unmount();
+//             });
+//           }
+//         },
+//         $off() {
+//           done();
+//         },
+//       },
+//     },
+//   });
+// });