小程序之如何设置图片以及image组件的属性

1.　　设置图片，小程序支持两种引用图片方法，一种是本地引用，一种是网络资源引用。

　　　但是引用本地图片的的时候不能用wxml样式去引用本地的图片，不会报错，也没效果。就是在wxss页面中不能引用本地的图片。这个时候就要用image组件了。

2.　　加载本地的图片

<image class="user" src='../../images/login/icon.png' style='width:120px;height:120px'></image>

　　　src是图片的相对路径，一般图片放在images这个文件夹中。这样就可以显示了。

　　　

　　　相反如果你是在wxss里这样写是没有效果的。

　　　

　　　看下效果：

　　　

　　　加载网络资源的图片：

　　　直接在src这个属性附上地址，它会自动加载。

　　<image class="user" src="{{imageUrl}}" mode="aspectFill"></image>

　　　这个imageUrl是在js文件中数据

　　data:{
  　　  imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg"
　　},

 3.　　image的属性

　　　

　　　需要注意image组件默认宽度300px、高度225px，然后主要是mode这个属性。mode有12种模式，其中3种是缩放模式，9种是裁剪模式。

　　　

　　　

 

转载于:https://www.cnblogs.com/jkzr/p/10299739.html