小程序之如何設置圖片以及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種是裁剪模式。