您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
圖片加載(本地,網路(lù))實例詳解
發表時間:2021-1-11
發布人:葵宇科技
浏覽次數:38
在微信小程序中(zhōng),要顯示一張圖片,有兩種圖片加載方式:
- 加載本地圖片
- 加載網絡圖片
加載本地圖片
<image class="widget__arrow" src="http://www.wxapp-union.com/image/arrowright.png" mode="aspectFill"> </image>
src="http://www.wxapp-union.com/image/arrowright.png" 這句就是加載本地圖片資(zī)源的。想想iOS中(zhōng)的加載本地圖片,imageName:,類似。
加載網絡圖片
微信在加載網絡這方面封裝的還是很好的,包括語音和(hé)視頻的加載。直接給'src'這個(gè)屬性附上地址,它會自動(dòng)加載。
<image class="image_frame" src="http://www.wxapp-union.com/{{imageUrl}}" mode="aspectFill"> </image>
這個(gè)imageUrl是在js文(wén)件中(zhōng)數據
data:{ imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg" },
也可(kě)以直接寫成
<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"> </image>
下(xià)來就看看image的一些屬性
需要注意的是:image組件默認寬度300px、高度225px
src就是上面代碼中(zhōng)用到的。
mode有12種模式,其中(zhōng)3種是縮放模式,9種是裁剪模式。
具體說明建議看官方文(wén)檔,很詳細。
很簡單就這些。
遺留問(wèn)題
在實踐中(zhōng),想實現這樣一個(gè)功能:點擊一個(gè)按鈕,讓這個(gè)圖片重新加載。
不知道怎樣可(kě)以在js文(wén)件中(zhōng)直接操作image。後續學習或許會知道。哪位仁兄知道方法請在留言中(zhōng)不吝賜教。
補充
遺留問(wèn)題已經找到答案。
在按鍵的響應方法中(zhōng)直接用setData給imageUrl設定新的地址即可(kě)
downLoadImage:function(event){ console.log(event) var that = this; this.setData({ imageUrl:"static/picture/6d81800a19d8bc3ed69473cb848ba61ea8d34516.jpg" }) }
效果如(rú)下(xià):
感謝閱讀,希望能幫助到大家,謝謝大家對本站(zhàn)的支持!