diff --git a/packages/varlet-ui/src/image/Image.vue b/packages/varlet-ui/src/image/Image.vue
new file mode 100644
index 00000000000..44cb253af0a
--- /dev/null
+++ b/packages/varlet-ui/src/image/Image.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="var-image var--box"
+    v-ripple="{ disabled: !ripple }"
+    :style="{
+      'border-radius': radius
+    }"
+  >
+    <img
+      class="var-image__image"
+      v-bind="$attrs"
+      :alt="alt"
+      :lazy-error="error"
+      :lazy-loading="loading"
+      :style="{
+        'width': width,
+        'height': height,
+        'object-fit': fit
+      }"
+      v-lazy="src"
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+import Ripple from '../ripple'
+import Lazy from '../lazy'
+
+export default defineComponent({
+  name: 'VarImage',
+  directives: {
+    Lazy,
+    Ripple
+  },
+  inheritAttrs: false,
+  props
+})
+</script>
+
+<style lang="less">
+@import "./image";
+</style>
+
diff --git a/packages/varlet-ui/src/image/__tests__/index.spec.js b/packages/varlet-ui/src/image/__tests__/index.spec.js
new file mode 100644
index 00000000000..30cde2af518
--- /dev/null
+++ b/packages/varlet-ui/src/image/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const Image = require('../../../cjs/image').default
+const { render } = require('@testing-library/vue')
+
+test('test image', async () => {
+  const wrapper = render(Image)
+  console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/image/docs/en_US.md b/packages/varlet-ui/src/image/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/image/docs/zh_CN.md b/packages/varlet-ui/src/image/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/image/example/index.vue b/packages/varlet-ui/src/image/example/index.vue
new file mode 100644
index 00000000000..514b883c048
--- /dev/null
+++ b/packages/varlet-ui/src/image/example/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <var-button @click="set">set</var-button>
+  <var-image width="200px" height="200px" fit="cover" src="https://ddtask.oss-cn-shanghai.aliyuncs.com/ddtask/201208ysl/images/1606982343202.jpg?Expires=1608703112&OSSAccessKeyId=TMP.3Kj8QoTDYVpdcwERRbtMRUh7wkoZvgG25VLcqMaqzYFdcqECUoupXbaFYu36z8tcVvCgwHxUo2RF1xdB46MJpNesxSzKsv&Signature=tmLF4Y65KgbR%2FeUXdZTGSMArxIo%3D&versionId=CAEQFBiBgMDNormesRciIGU5YmQ5MWQwZjZhZTQxNGY5Nzk5YjM1ZDRhY2Q0NzYw&response-content-type=application%2Foctet-stream"/>
+  <var-image width="200px" height="200px" fit="cover" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com"></var-image>
+  <var-image width="200px" height="200px" fit="cover" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com"></var-image>
+  <var-image width="200px" height="200px" fit="cover" :src="src"></var-image>
+  <var-image width="200px" height="200px" fit="cover" radius="50%" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+  <var-image width="200px" height="400px" fit="cover" radius="50%" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+  <var-image width="200px" height="200px" fit="cover" radius="50%" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+  <var-image width="200px" height="400px" fit="cover" error="https://cn.vuejs.org/images/logo.png" src="https://asdadsaas.com" :ripple="true"></var-image>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref } from 'vue'
+import Button from '../../button'
+import Image from '..'
+
+export default defineComponent({
+  name: 'ImageExample',
+  components: {
+    [Image.name]: Image,
+    [Button.name]: Button
+  },
+  setup() {
+    const src: Ref<string> = ref('https://asdadsaas.com')
+
+    return {
+      src,
+      set() {
+        src.value = 'https://cn.vuejs.org/images/logo.png'
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+.example {
+  background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/image/image.less b/packages/varlet-ui/src/image/image.less
new file mode 100644
index 00000000000..ce5b8061551
--- /dev/null
+++ b/packages/varlet-ui/src/image/image.less
@@ -0,0 +1,8 @@
+.var-image {
+  display: inline-block;
+  overflow: hidden;
+
+  &__image {
+    display: block;
+  }
+}
diff --git a/packages/varlet-ui/src/image/index.ts b/packages/varlet-ui/src/image/index.ts
new file mode 100644
index 00000000000..9b340d80264
--- /dev/null
+++ b/packages/varlet-ui/src/image/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Image from './Image.vue'
+
+Image.install = function(app: App) {
+  app.component(Image.name, Image)
+}
+
+export default Image
diff --git a/packages/varlet-ui/src/image/props.ts b/packages/varlet-ui/src/image/props.ts
new file mode 100644
index 00000000000..e7d2260058e
--- /dev/null
+++ b/packages/varlet-ui/src/image/props.ts
@@ -0,0 +1,37 @@
+function fitValidator(fit: string) {
+  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit)
+}
+
+export const props = {
+  src: {
+    type: String
+  },
+  fit: {
+    type: String,
+    validator: fitValidator,
+    default: 'fill'
+  },
+  alt: {
+    type: String
+  },
+  width: {
+    type: String
+  },
+  height: {
+    type: String
+  },
+  radius: {
+    type: String,
+    default: '0'
+  },
+  error: {
+    type: String
+  },
+  loading: {
+    type: String
+  },
+  ripple: {
+    type: Boolean,
+    default: false
+  }
+}