字節(jié)跳動小程序開發(fā)組件文檔 image

2019-08-12 15:52 更新

圖片。支持JPG、PNG、SVG格式。暫不支持WEBP。

屬性名	類型	默認(rèn)值	說明	最低版本
src	String		圖片資源地址	1.0.0
mode	String	scaleToFill	圖片剪裁方式，詳情見后面的表格	1.0.0
lazy-load	Boolean	false	圖片懶加載。只針對page與scroll-view下的img有效	1.0.0
binderror	EventHandler		當(dāng)錯誤發(fā)生時	1.0.0
bindload	EventHandler		當(dāng)圖片加載完時	1.0.0

img組件默認(rèn)的寬度是300px、高度是225px

mode取值范圍：

模式	值	說明
縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 img 元素
縮放	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ū)域

示例

<image style="width:200px; height: 200px;"
    src="../../resources/lena.png" mode="aspectFill" />

原圖：

不同mode值表現(xiàn)：

以上內(nèi)容是否對您有幫助：

寫筆記

我要補(bǔ)充