引入

  1. {
  2.   "usingComponents": {
  3.     "x-image":"waft-ui/assembly/image/image"
  4.   }
  5. }

代码示例

  1. <x-image height="50rpx" width="50rpx" src="https://gw.alicdn.com/imgextra/i1/O1CN01Ol1xXi1zuXeMTVRjD_!!6000000006774-2-tps-305-305.png"></x-image>

组件样式

axml

  1. <view class="wrapper">
  2.   <x-nav-bar showArrow="{{true}}" title="测试图片"></x-nav-bar>
  3.   <view class="content">
  4.     <x-image full="{{ true }}" width="400rpx" height="400rpx" src="https://gw.alicdn.com/imgextra/i1/O1CN01dudMzQ1eY0BV29999_!!6000000003882-2-tps-1920-1080.png"></x-image>
  5.   </view>
  6. </view>

css

  1. .wrapper {
  2.   width: 100%;
  3.   height: 100%;
  4.   display: flex;
  5.   flex-direction: column;
  6.   justify-content: flex-start;
  7.   align-items: center;
  8.   background-color: #eeeeee;
  9. }
  10. .content{
  11.   flex: 1;
  12.   display: flex;
  13.   flex-direction: column;
  14.   justify-content: flex-start;
  15.   align-items: center;
  16.   padding-top: 30rpx;
  17. }

API

  • props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | height | 图片高度 | string | 100rpx | | width | 图片宽度 | string | 100rpx | | src | 图片url地址 必传 | string | | | resize | stretch：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
    cover：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
    contain：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 | string | stretch |