欧美日韩精品一区二区在线线,一级无码在线收看,精品国产高清91,久久精品欧美电影
取消
中文
EN
取消

# image

基礎庫 1.0.0 開始支持，低版本需做兼容處理。

微信 Windows 版：支持

微信 Mac 版：支持

微信 鴻蒙 OS 版：支持

渲染框架支持情況：Skyline （使用最新 Nightly 工具調(diào)試）、WebView

# 功能描述

圖片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

  1. 使用 svg 格式且 mode=scaleToFill 時，WebView 會居中（除非 svg 里加上 preserveAspectRatio="none"），Skyline 則會撐滿
  2. svg 格式不支持百分比單位
  3. svg 格式不支持 <style> element

# 通用屬性

屬性 類型 默認值 必填 說明 最低版本
src string 否 圖片資源地址 1.0.0
mode string scaleToFill 否 圖片裁剪、縮放的模式 1.0.0
合法值 說明 最低版本
scaleToFill 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit 縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
widthFix 縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix 縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變 2.10.3
top 裁剪模式，不縮放圖片，只顯示圖片的頂部區(qū)域。僅 Webview 支持。
bottom 裁剪模式，不縮放圖片，只顯示圖片的底部區(qū)域。僅 Webview 支持。
center 裁剪模式，不縮放圖片，只顯示圖片的中間區(qū)域。僅 Webview 支持。
left 裁剪模式，不縮放圖片，只顯示圖片的左邊區(qū)域。僅 Webview 支持。
right 裁剪模式，不縮放圖片，只顯示圖片的右邊區(qū)域。僅 Webview 支持。
top left 裁剪模式，不縮放圖片，只顯示圖片的左上邊區(qū)域。僅 Webview 支持。
top right 裁剪模式，不縮放圖片，只顯示圖片的右上邊區(qū)域。僅 Webview 支持。
bottom left 裁剪模式，不縮放圖片，只顯示圖片的左下邊區(qū)域。僅 Webview 支持。
bottom right 裁剪模式，不縮放圖片，只顯示圖片的右下邊區(qū)域。僅 Webview 支持。
show-menu-by-longpress boolean false 否 長按圖片顯示發(fā)送給朋友、收藏、保存圖片、搜一搜、打開名片/前往群聊/打開小程序（若圖片中包含對應二維碼或小程序碼）的菜單。 2.7.0
binderror eventhandle 否 當錯誤發(fā)生時觸發(fā)，event.detail = {errMsg} 1.0.0
bindload eventhandle 否 當圖片載入完畢時觸發(fā)，event.detail = {height, width} 1.0.0

# Skyline 特有屬性

屬性 類型 默認值 必填 說明
fade-in boolean false 否 是否漸顯

# WebView 特有屬性

屬性 類型 默認值 必填 說明 最低版本
webp boolean false 否 默認不解析 webP 格式，只支持網(wǎng)絡資源 2.9.0
lazy-load boolean false 否 圖片懶加載，在即將進入一定范圍（上下三屏）時才開始加載。Skyline 默認懶加載。 1.5.0
forceHttps boolean false 否 自動將 http 鏈接替換為 https 鏈接 3.9.1

# 支持長按識別的碼

類型 說明 最低版本
小程序碼
微信個人碼 2.18.0
企業(yè)微信個人碼 2.18.0
普通群碼 指僅包含微信用戶的群 2.18.0
互通群碼 指既有微信用戶也有企業(yè)微信用戶的群 2.18.0
公眾號二維碼 2.18.0

# Bug & Tip

  1. tip：image組件默認寬度320px、高度240px
  2. tip：image組件進行縮放時，計算出來的寬高可能帶有小數(shù)，在不同webview內(nèi)核下渲染可能會被抹去小數(shù)部分

# 示例代碼

在開發(fā)者工具中預覽效果

# 原圖

image