diff --git a/src-next/image/README.md b/src-next/image/README.md
new file mode 100644
index 000000000..2b3bb1bf9
--- /dev/null
+++ b/src-next/image/README.md
@@ -0,0 +1,105 @@
+# Image
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Image as VanImage } from 'vant';
+
+Vue.use(VanImage);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+
+```
+
+### Fit Mode
+
+```html
+
+```
+
+### Round
+
+Show round image, it may not works at `fit=contain` and `fit=scale-down`
+
+```html
+
+```
+
+### Lazy Load
+
+```html
+
+```
+
+```js
+import Vue from 'vue';
+import { Lazyload } from 'vant';
+
+Vue.use(Lazyload);
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| src | Src | _string_ | - |
+| fit | Fit mode | _string_ | `fill` |
+| alt | Alt | _string_ | - |
+| width | Width | _number \| string_ | - |
+| height | Height | _number \| string_ | - |
+| radius `v2.1.6` | Border Radius | _number \| string_ | `0` |
+| round | Whether to be round | _boolean_ | `false` |
+| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
+| show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` |
+| show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` |
+| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` |
+| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` |
+
+### fit optional value
+
+| name | desctription |
+| --- | --- |
+| contain | Keep aspect ratio, fully display the long side of the image |
+| cover | Keep aspect ratio, fully display the short side of the image, cutting the long side |
+| fill | Stretch and resize image to fill the content box |
+| none | Not resize image |
+| scale-down | Take the smaller of `none` or `contain` |
+
+### Events
+
+| Event | Description | Arguments |
+| ----- | -------------------------------- | -------------- |
+| click | Triggered when click image | _event: Event_ |
+| load | Triggered when image loaded | - |
+| error | Triggered when image load failed | - |
+
+### Slots
+
+| Name | Description |
+| ---------------- | ---------------------------------- |
+| default `v2.9.0` | Custom the content below the image |
+| loading | Custom loading placeholder |
+| error | Custom error placeholder |
diff --git a/src-next/image/README.zh-CN.md b/src-next/image/README.zh-CN.md
new file mode 100644
index 000000000..adf57f026
--- /dev/null
+++ b/src-next/image/README.zh-CN.md
@@ -0,0 +1,175 @@
+# Image 图片
+
+### 介绍
+
+增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { Image as VanImage } from 'vant';
+
+Vue.use(VanImage);
+```
+
+## 代码演示
+
+### 基础用法
+
+基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性
+
+```html
+
+```
+
+### 填充模式
+
+通过`fit`属性可以设置图片填充模式，可选值见下方表格
+
+```html
+
+```
+
+### 圆形图片
+
+通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
+
+```html
+
+```
+
+### 图片懒加载
+
+设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
+
+```html
+
+```
+
+```js
+import Vue from 'vue';
+import { Lazyload } from 'vant';
+
+Vue.use(Lazyload);
+```
+
+### 加载中提示
+
+`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
+
+```html
+
+
+
+
+
+```
+
+### 加载失败提示
+
+`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
+
+```html
+
+ 加载失败
+
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 图片链接 | _string_ | - |
+| fit | 图片填充模式 | _string_ | `fill` |
+| alt | 替代文本 | _string_ | - |
+| width | 宽度，默认单位为`px` | _number \| string_ | - |
+| height | 高度，默认单位为`px` | _number \| string_ | - |
+| radius `v2.1.6` | 圆角大小，默认单位为`px` | _number \| string_ | `0` |
+| round | 是否显示为圆形 | _boolean_ | `false` |
+| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
+| show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` |
+| show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` |
+| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` |
+| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` |
+
+### 图片填充模式
+
+| 名称 | 含义 |
+| ---------- | ------------------------------------------------------ |
+| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
+| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
+| fill | 拉伸图片，使图片填满元素 |
+| none | 保持图片原有尺寸 |
+| scale-down | 取`none`或`contain`中较小的一个 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| ------ | ------------------ | -------------- |
+| click | 点击图片时触发 | _event: Event_ |
+| load | 图片加载完毕时触发 | - |
+| error | 图片加载失败时触发 | - |
+
+### Slots
+
+| 名称 | 说明 |
+| ---------------- | -------------------------- |
+| default `v2.9.0` | 自定义图片下方的内容 |
+| loading | 自定义加载中的提示内容 |
+| error | 自定义加载失败时的提示内容 |
+
+## 常见问题
+
+### 如何引用本地图片？
+
+在 .vue 文件中通过相对路径引用本地图片时，需要在图片的链接外包上一层 `require()`，将图片 URL 转换为 webpack 模块请求，并结合 [file-loader](https://github.com/webpack-contrib/file-loader) 或者 [url-loader](https://github.com/webpack-contrib/url-loader) 进行处理。
+
+```html
+
+
+
+
+
+```
+
+> 对此更详细的解释可以参考 vue-loader 的[处理资源路径](https://vue-loader.vuejs.org/zh/guide/asset-url.html)章节。
+
+### 使用 image 标签无法渲染？
+
+使用 Image 组件时，可能会遇到将 \ 作为标签名时无法渲染的问题，比如下面的写法：
+
+```html
+
+
+
+
+
+
+
diff --git a/src-next/image/index.js b/src-next/image/index.js
new file mode 100644
index 000000000..02fa9334a
--- /dev/null
+++ b/src-next/image/index.js
@@ -0,0 +1,184 @@
+import { createNamespace, isDef, addUnit } from '../utils';
+import Icon from '../icon';
+
+const [createComponent, bem] = createNamespace('image');
+
+export default createComponent({
+ props: {
+ src: String,
+ fit: String,
+ alt: String,
+ round: Boolean,
+ width: [Number, String],
+ height: [Number, String],
+ radius: [Number, String],
+ lazyLoad: Boolean,
+ showError: {
+ type: Boolean,
+ default: true,
+ },
+ showLoading: {
+ type: Boolean,
+ default: true,
+ },
+ errorIcon: {
+ type: String,
+ default: 'warning-o',
+ },
+ loadingIcon: {
+ type: String,
+ default: 'photo-o',
+ },
+ },
+
+ data() {
+ return {
+ loading: true,
+ error: false,
+ };
+ },
+
+ watch: {
+ src() {
+ this.loading = true;
+ this.error = false;
+ },
+ },
+
+ computed: {
+ style() {
+ const style = {};
+
+ if (isDef(this.width)) {
+ style.width = addUnit(this.width);
+ }
+
+ if (isDef(this.height)) {
+ style.height = addUnit(this.height);
+ }
+
+ if (isDef(this.radius)) {
+ style.overflow = 'hidden';
+ style.borderRadius = addUnit(this.radius);
+ }
+
+ return style;
+ },
+ },
+
+ created() {
+ const { $Lazyload } = this;
+
+ if ($Lazyload) {
+ $Lazyload.$on('loaded', this.onLazyLoaded);
+ $Lazyload.$on('error', this.onLazyLoadError);
+ }
+ },
+
+ beforeDestroy() {
+ const { $Lazyload } = this;
+
+ if ($Lazyload) {
+ $Lazyload.$off('loaded', this.onLazyLoaded);
+ $Lazyload.$off('error', this.onLazyLoadError);
+ }
+ },
+
+ methods: {
+ onLoad(event) {
+ this.loading = false;
+ this.$emit('load', event);
+ },
+
+ onLazyLoaded({ el }) {
+ if (el === this.$refs.image && this.loading) {
+ this.onLoad();
+ }
+ },
+
+ onLazyLoadError({ el }) {
+ if (el === this.$refs.image && !this.error) {
+ this.onError();
+ }
+ },
+
+ onError(event) {
+ this.error = true;
+ this.loading = false;
+ this.$emit('error', event);
+ },
+
+ onClick(event) {
+ this.$emit('click', event);
+ },
+
+ genPlaceholder() {
+ if (this.loading && this.showLoading) {
+ return (
+
+ {this.$slots.loading ? (
+ this.$slots.loading()
+ ) : (
+
+ )}
+
+ );
+ }
+
+ if (this.error && this.showError) {
+ return (
+
+ {this.$slots.error ? (
+ this.$slots.error()
+ ) : (
+
+ )}
+
+ );
+ }
+ },
+
+ genImage() {
+ const imgData = {
+ class: bem('img'),
+ attrs: {
+ alt: this.alt,
+ },
+ style: {
+ objectFit: this.fit,
+ },
+ };
+
+ if (this.error) {
+ return;
+ }
+
+ if (this.lazyLoad) {
+ return ![]()
;
+ }
+
+ return (
+ 
+ );
+ },
+ },
+
+ render() {
+ return (
+
+ {this.genImage()}
+ {this.genPlaceholder()}
+ {this.$slots.default?.()}
+
+ );
+ },
+});
diff --git a/src-next/image/index.less b/src-next/image/index.less
new file mode 100644
index 000000000..5f5af3f91
--- /dev/null
+++ b/src-next/image/index.less
@@ -0,0 +1,45 @@
+@import '../style/var';
+
+.van-image {
+ position: relative;
+ display: inline-block;
+
+ &--round {
+ overflow: hidden;
+ border-radius: 50%;
+
+ img {
+ border-radius: inherit;
+ }
+ }
+
+ &__img,
+ &__error,
+ &__loading {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__error,
+ &__loading {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: @image-placeholder-text-color;
+ font-size: @image-placeholder-font-size;
+ background-color: @image-placeholder-background-color;
+ }
+
+ &__loading-icon {
+ font-size: @image-loading-icon-size;
+ }
+
+ &__error-icon {
+ font-size: @image-error-icon-size;
+ }
+}
diff --git a/src-next/image/test/__snapshots__/demo.spec.js.snap b/src-next/image/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..2c1671de0
--- /dev/null
+++ b/src-next/image/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
contain
+
+
+
+
+
+
+
cover
+
+
+
+
+
+
+
fill
+
+
+
+
+
+
+
none
+
+
+
+
+
+
+
scale-down
+
+
+
+
+
+
+
+
+
+
+
contain
+
+
+
+
+
+
+
cover
+
+
+
+
+
+
+
fill
+
+
+
+
+
+
+
none
+
+
+
+
+
+
+
scale-down
+
+
+
+
+
+
+
![]()
+
+
+
+
默认提示
+
+
+
![]()
+
+
+
自定义提示
+
+
+
+
+
+
+
+
+
+
+
默认提示
+
+
+
+
+
+
+
自定义提示
+
+
+
+
+
+
Custom Default
+
![]()
+
+
+
![]()
+
+
+
![]()
+
+
+
+
+
+