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种是裁剪模式。