• image 圖片
  • 屬性說明
    • mode 有效值
  • 示例
    • 代碼示例 1：自定義縮放模式
    • 代碼示例 2：不縮放圖片，自定義裁切模式
    • 代碼示例 3：iOS 可支持 webp
    • 代碼示例 4：可放動圖
  • Bug & Tip

image 圖片

解釋：圖片，支持 JPG、PNG、GIF、BMP、WEBP 等格式。image 組件默認(rèn)寬度 300px 、高度 225px 。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了山陽免費(fèi)建站歡迎大家使用！

屬性說明

src

String

否

圖片資源地址

mode

String

scaleToFill

否

圖片裁剪、縮放的模式

webp

Boolean

false

否

只針對 iOS 端，且 iOS 系統(tǒng)默認(rèn)不解析 WEBP 格式，只支持網(wǎng)絡(luò)資源

3.180.1

lazy-load

Boolean

false

否

圖片懶加載，在圖片即將進(jìn)入一定范圍（距離當(dāng)前屏 50px）時才開始進(jìn)行加載

image-menu-prevent

Boolean

false

否

阻止長按圖片時彈起默認(rèn)菜單（即將該屬性設(shè)置為image-menu-prevent=”true”或image-menu-prevent），只在初始化時有效，不能動態(tài)變更；若不想阻止彈起默認(rèn)菜單，則不需要設(shè)置此屬性。注：長按菜單后的操作暫不支持 svg 格式

3.170.1

preview

Boolean

否

點(diǎn)擊后是否預(yù)覽圖片。在不設(shè)置的情況下，若 image 未監(jiān)聽點(diǎn)擊事件且寬度大于 1/4 屏寬，則默認(rèn)開啟

3.170.9

original-src

string

否

預(yù)覽時顯示的圖片地址

3.170.9

binderror

EventHandle

否

當(dāng)錯誤發(fā)生時，發(fā)布到 AppService 的事件名，事件對象event.detail = {errMsg: ‘something wrong’}

bindload

EventHandle

否

當(dāng)圖片載入完畢時，發(fā)布到 AppService 的事件名，事件對象event.detail = {height:’圖片高度 px’, width:’圖片寬度 px’}

mode 有效值

有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

縮放

scaleToFill

不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素

縮放

aspectFit

保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來

縮放

aspectFill

保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取

縮放

widthFix

寬度不變，高度自動變化，保持原圖寬高比不變

裁剪

top

不縮放圖片，只顯示圖片的頂部區(qū)域

裁剪

bottom

不縮放圖片，只顯示圖片的底部區(qū)域

裁剪

center

不縮放圖片，只顯示圖片的中間區(qū)域

裁剪

left

不縮放圖片，只顯示圖片的左邊區(qū)域

裁剪

right

不縮放圖片，只顯示圖片的右邊區(qū)域

裁剪

top left

不縮放圖片，只顯示圖片的左上區(qū)域

裁剪

top right

不縮放圖片，只顯示圖片的右上區(qū)域

裁剪

bottom left

不縮放圖片，只顯示圖片的左下區(qū)域

裁剪

bottom right

不縮放圖片，只顯示圖片的右下區(qū)域

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例 1：自定義縮放模式

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 class="image-area {{item.hasBackgroud == 1 ? 'backGround': ''}}"
  
  
  
 data-name="{{item.mode}}"
  
  
  
 bindtap="onTap"
  
  
  
 mode="{{item.mode}}"
  
  
  
 src="{{src}}"
  
  
  
 binderror="imageError"
  
  
  
 bindload="imageLoad" />
  
  
  
 {{item.text}}
  
  
  
 
  
  
  
 
 

代碼示例 2：不縮放圖片，自定義裁切模式

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 class="image-area"
  
  
  
 data-name="{{item.mode}}"
  
  
  
 bindtap="onTap"
  
  
  
 lazy-load="true"
  
  
  
 image-menu-prevent="true"
  
  
  
 mode="{{item.mode}}"
  
  
  
 src="{{src}}"
  
  
  
 binderror="imageError"
  
  
  
 bindload="imageLoad" />
  
  
  
 {{item.text}}
  
  
  
 
  
  
  
 
 

代碼示例 3：iOS 可支持 webp

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 iOS 可支持 webp
  
  
  
 
  
  
  
 
  
  
  
 
 

代碼示例 4：可放動圖

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 可放動圖
  
  
  
 
  
  
  
 
  
  
  
 
 

Bug & Tip

• Tip：支持設(shè)置 CSS background-position 屬性，但是不推薦使用，會影響對應(yīng) mode 類型的展示。
• Tip：未顯示設(shè)置 preview 的圖片會進(jìn)行點(diǎn)擊默認(rèn)預(yù)覽判斷，建議顯示設(shè)置 preview 。
• Tip：點(diǎn)擊預(yù)覽功能 iOS 端目前不支持本地圖片預(yù)覽，可以設(shè)置 original-src 為遠(yuǎn)程圖片地址。