---
name: Image
title: 图片
category: 媒体组件
owner: 董华磊
---

```atom 基础示例
<template>
    <view class="wrap">
        <view class="title">
            lazyload模式，懒加载
        </view>
        <scroll-view
            class="scrollview">
            <image
                src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/awhcrop%3D250%2C250/sign=273dc8aab9fb43160c55272952cb361e/71cf3bc79f3df8dccb5027f0c611728b47102865.jpg"
                :lazyLoad="true">
            </image>
            <image
                src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/awhcrop%3D250%2C250/sign=70495b0d1b3853439a85da72e17cc043/c995d143ad4bd11336931f5351afa40f4bfb0570.jpg"
                :lazyLoad="true">
            </image>
            <image
                src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/awhcrop%3D250%2C250/sign=70545b0d1b3853439a85da72e17cc043/c995d143ad4bd113368e1f5351afa40f4bfb050b.jpg"
                :lazyLoad="true">
            </image>
            <image
                src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/awhcrop%3D250%2C250/sign=474d246990504fc2b415ed5697b2972c/377adab44aed2e73e3b72e4d8c01a18b87d6fa71.jpg"
                :lazyLoad="true">
            </image>
        </scroll-view>
        <view class="title">
            scaleToFill：不保持纵横比缩放图片，使图片完全适应
        </view>
        <view class="scaletofill">
            <image
                src="http://smartprogram.baidu.com/docs/img/image.jpg"
                @load="onLoadImg">
            </image>
        </view>
        <view class="scaletofill">
            <image
                src="http://smrtprogram.baidu.com/docs/img/image.jpg"
                @error="onErrorImg">
            </image>
        </view>
        <view class="title">
            aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
        </view>
        <view class="aspectFit">
            <image
                src="http://smartprogram.baidu.com/docs/img/image.jpg"
                mode="aspectFit"
            >
            </image>
        </view>
        <view class="title">
            aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来
        </view>
        <view class="aspectFill">
            <image
                src="http://smartprogram.baidu.com/docs/img/image.jpg"
                mode="aspectFill"
            >
            </image>
        </view>
        <view class="title">
            widthFix：宽度不变，高度自动变化，保持原图宽高比不变
        </view>
        <view class="widthFix">
            <image
                style="width: 100%;"
                src="http://smartprogram.baidu.com/docs/img/image.jpg"
                mode="widthFix"
            >
            </image>
        </view>
        <view class="title">
            top：不缩放图片，只显示图片的顶部区域
        </view>
        <view class="top">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="top"
            >
            </image>
        </view>
        <view class="title">
            bottom：不缩放图片，只显示图片的底部区域
        </view>
        <view class="bottom">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="bottom"
            >
            </image>
        </view>
        <view class="title">
            center：不缩放图片，只显示图片的中间区域
        </view>
        <view class="center">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="center"
            >
            </image>
        </view>
        <view class="title">
            left：不缩放图片，只显示图片的左边区域
        </view>
        <view class="left">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="left"
            >
            </image>
        </view>
        <view class="title">
            right：不缩放图片，只显示图片的右边边区域
        </view>
        <view class="right">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="right"
            >
            </image>
        </view>
        <view class="title">
            top left：不缩放图片，只显示图片的左上边区域
        </view>
        <view class="topleft">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="top left"
            >
            </image>
        </view>
        <view class="title">
            top right：不缩放图片，只显示图片的右上边区域
        </view>
        <view class="topright">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="top right"
            >
            </image>
        </view>
        <view class="title">
            bottom left：不缩放图片，只显示图片的左下边区域
        </view>
        <view class="bottomleft">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="bottom left"
            >
            </image>
        </view>
        <view class="title">
            bottom right：不缩放图片，只显示图片的右下边区域
        </view>
        <view class="bottomright">
            <image
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547570835940&di=c0ace9eece954d2d5f6a79ebae394dd8&imgtype=0&src=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F4_img%2F2013_19%2F704_959356_542932.jpg"
                mode="bottom right"
            >
            </image>
        </view>
    </view>
</template>

<script type="config">
    {
        components: {
            'image': 'components/Image/Image',
            'view': 'components/View/View',
            'scroll-view': 'components/ScrollView/ScrollView'
        }
    }
</script>


<script>
export default {
    methods: {
        onLoadImg(e) {
            console.log(e);
        },
        onErrorImg(e) {
            console.log(e);
        }
    }
};
</script>
<style scoped>


.wrap {
    font-size: .16rem;
    padding: .1rem 0;
    background: #fff;
}


.scrollview {
    height: 5.66rem;
}

.title {
    padding: 0 .17rem;
}

.scaletofill {
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.aspectFit {
    text-align: center;
    background-color: #eee;
}

.widthFix {
    width: 100%;
}

.aspectFill {
    text-align: center;
    background-color: #eee;
}

.top {
    text-align: center;
    background-color: #eee;
}

.bottom {
    text-align: center;
    background-color: #eee;
}

.center {
    text-align: center;
    background-color: #eee;
}

.left,
.right,
.topleft,
.topright,
.bottomleft,
.bottomright {
    text-align: center;
    background-color: #eee;
}
</style>
```


## API
### Props



名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
src | string |  | 可选 | 图片资源地址 | -
mode | string | scaleToFill | 可选 | 图片裁剪、缩放的模式<br>-&nbsp;scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至铺满image元素<br>-&nbsp;aspectFit:&nbsp;保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。<br>-&nbsp;aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。<br>-&nbsp;widthFix：宽度不变，高度自动变化，保持原图宽高比不变<br>-&nbsp;top：不缩放图片，只显示图片的顶部区域<br>-&nbsp;bottom：不缩放图片，只显示图片的底部区域<br>-&nbsp;center：不缩放图片，只显示图片的中间区域<br>-&nbsp;left：不缩放图片，只显示图片的左边区域<br>-&nbsp;right：&nbsp;不缩放图片，只显示图片的右边区域<br>-&nbsp;top&nbsp;left：不缩放图片，只显示图片的左上区域<br>-&nbsp;top&nbsp;right：不缩放图片，只显示图片的右上区域<br>-&nbsp;bottom&nbsp;left：不缩放图片，只显示图片的左下区域<br>-&nbsp;bottom&nbsp;right：不缩放图片，只显示图片的右下区域 | -
lazyLoad | boolean | false | 可选 | 图片懒加载：false（默认不懒加载）；true（懒加载） | -



### Events
无