這期我們來學(xué)學(xué)怎么在小程序中插入圖片
1.image組件的簡介
? ? ? ? 是小程序中一個(gè)圖片的組件
? ? ? ? image組件有一個(gè)默認(rèn)寬度和高度（寬300px，高240px）
????????支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0?起支持云文件ID。
我們先添加一個(gè)image組件給他一個(gè)邊框看看他的默認(rèn)情況
?我們從圖中可以看出，我什么都沒加有一個(gè)基礎(chǔ)的框框大小（寬300px，高240px）
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 圖片資源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 圖片裁剪、縮放的模式 | 1.0.0 |
| webp | boolean | false | 否 | 默認(rèn)不解析 webP 格式，只支持網(wǎng)絡(luò)資源 | 2.9.0 |
| lazy-load | boolean | false | 否 | 圖片懶加載，在即將進(jìn)入一定范圍（上下三屏）時(shí)才開始加載 | 1.5.0 |
| show-menu-by-longpress | boolean | false | 否 | 長按圖片顯示發(fā)送給朋友、收藏、保存圖片、搜一搜、打開名片/前往群聊/打開小程序（若圖片中包含對應(yīng)二維碼或小程序碼）的菜單。 | 2.7.0 |
| binderror | eventhandle | 否 | 當(dāng)錯(cuò)誤發(fā)生時(shí)觸發(fā)，event.detail = {errMsg} | 1.0.0 | |
| bindload | eventhandle | 否 | 當(dāng)圖片載入完畢時(shí)觸發(fā)，event.detail = {height, width} | 1.0.0 |
我們先準(zhǔn)備一張
這張照片 555*545 我們先在把他放入文件夾?
然后創(chuàng)建一個(gè)新的image組件看看他是怎么顯示的
??以上是image組件中的常用屬性，但是為了大家學(xué)習(xí)效率，我只講解一下mode屬性里面的幾個(gè)屬性值
| |||||||||||||||||||||||
?2.mode組件scaleToFill值的用法（縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素）
我們從上面先看到?jīng)]有添加mode元素的時(shí)候照片的比例是有變化的，強(qiáng)行占滿了默認(rèn)的（寬300px，高240px）像素大小。
當(dāng)我們使用scaleToFill值試一下
?我們發(fā)現(xiàn)我們使用了這個(gè)屬性值照片沒有發(fā)生變化這是為什么呢？
因?yàn)樵趇mage組件沒有mode值的時(shí)候默認(rèn)就是scaleTofill屬性值，他的意思就是把圖片拉深，填滿整個(gè)盒子。
3.mode組件aspectFit值的用法（縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。）
我們將值修改到aspectFit試試，看看啥效果。
?我們發(fā)現(xiàn)他等比縮放了我們的圖片，根據(jù)小于圖片長或?qū)挼拇笮∵M(jìn)行等比縮放，直到圖片能完全展示出來。
4.mode組件aspectFill值的用法（縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)l(fā)生截取。）
我們將值修改到aspectFill試一下。
?我們發(fā)現(xiàn)這個(gè)值產(chǎn)生的情況就是將我們的圖片進(jìn)行等比縮放占滿整個(gè)盒子。
5.mode組件widthFix值的用法（縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變）
這個(gè)用法就和上面相似改變了一下縮放模式長款有一個(gè)邊固定縮放。
?他的width值和盒子保持一致，高等比變化，將盒子撐開來顯示圖片
6.mode組件heightFix值的用法（縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變）
這個(gè)用法和上面其實(shí)是差不多的道理
就是圖片更具盒子的高進(jìn)行等比縮放，從而達(dá)到他的寬變化。文章來源：http://www.zghlxwxcb.cn/news/detail-407453.html
以上就是image組件的mode常用參數(shù)講解，如果覺的沒問題的可以進(jìn)群一起聊技術(shù)文章來源地址http://www.zghlxwxcb.cn/news/detail-407453.html
到了這里，關(guān)于微信小程序 怎么插入圖片？image組件的使用教程。的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![微信小程序渲染圖片報(bào)錯(cuò)：[渲染層網(wǎng)絡(luò)層錯(cuò)誤] Failed to load local image resource](https://imgs.yssmx.com/Uploads/2024/02/775793-1.png)
