微信小程序——image图片组件

最新推荐文章于 2025-05-19 15:16:10 发布

原创最新推荐文章于 2025-05-19 15:16:10 发布 · 4.7k 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了WeChat小程序中image图片组件的使用方法，包括不同的显示模式如scaleToFill、aspectFit等，并通过示例代码展示了如何在wxml文件中配置图片组件，以及在js文件中设置数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

image图片组件
在这里插入图片描述

image.wxml文件

<view class="container">
      <view wx:for="{{array}}" wx:for-item="item">
           <view>{{item.text}}</view>
           <view>
                <image style="demoing" mode="{{item.mode}}" src="{{src}}"></image>
           </view>
      </view>
</view>

image.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
      array:[{
        mode:'scaleToFill',
        text:'scaleToFill:不保持纵横比缩放图片，使图片完全适应'
      },{
        mode: 'aspectFit',
        text: 'aspectFit:保持纵横比缩放图片，使图片的长边能完全显示出来'
      },{
        mode: 'aspectFill',
        text: 'aspectFill:保持纵横比缩放图片，使图片的短边能完全显示出来'
      },{
        mode: 'top',
        text: 'top:不缩放图片，只显示图片的顶部区域'
      },{
        mode: 'buttom',
        text: 'buttom:不缩放图片，只显示图片的底部区域'
      },{
        mode: 'center',
        text: 'center:不缩放图片，只显示图片的中间区域'
      },{
        mode: 'left',
        text: 'left:不缩放图片，只显示图片的左部区域'
      },{
        mode: 'right',
        text: 'right:不缩放图片，只显示图片的右部区域'
      },{
        mode: 'top left',
        text: 'top left:不缩放图片，只显示图片的左上区域'
      },{
        mode: 'top right',
        text: 'top right:不缩放图片，只显示图片的右上区域' 
      },{
        mode: 'buttom left',
        text: 'buttom left:不缩放图片，只显示图片的左下区域'
      },{
        mode: 'buttom right',
        text: 'buttom right:不缩放图片，只显示图片的右下区域'
      }],
      src:'../../images/cat.jpg'
  },
   imageError:function(e){
     console.log('image3发生error事件，携带值为',e.detail.errMsg)
   }
  
})

效果图

在这里插入图片描述