## image 圖片 **屬性名** ``` 類型 默認值 說明 平臺支持 src String 圖片資源地址 mode String 'scaleToFill' 圖片裁剪、縮放的模式 lazy-load Boolean false 圖片懶加載。只針對page與scroll-view下的image有效 微信小程序 @error HandleEvent 當錯誤發生時，發布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'} @load HandleEvent 當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'} 注：image組件默認寬度300px、高度225px ``` mode 有效值： mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。 **模式 值 說明** ``` 縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。 縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變 裁剪 top 不縮放圖片，只顯示圖片的頂部區域 裁剪 bottom 不縮放圖片，只顯示圖片的底部區域 裁剪 center 不縮放圖片，只顯示圖片的中間區域 裁剪 left 不縮放圖片，只顯示圖片的左邊區域 裁剪 right 不縮放圖片，只顯示圖片的右邊區域 裁剪 top left 不縮放圖片，只顯示圖片的左上邊區域 裁剪 top right 不縮放圖片，只顯示圖片的右上邊區域 裁剪 bottom left 不縮放圖片，只顯示圖片的左下邊區域 裁剪 bottom right 不縮放圖片，只顯示圖片的右下邊區域 ``` 說明： 圖片支持遠程路徑。 ## audio 音頻 **屬性名 類型 默認值 說明** ``` id String audio 組件的唯一標識符 src String 要播放音頻的資源地址 loop Boolean false 是否循環播放 controls Boolean false 是否顯示默認控件 poster String 默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設置 poster 無效 name String 未知音頻 默認控件上的音頻名字，如果 controls 屬性值為 false 則設置 name 無效 author String 未知作者 默認控件上的作者名字，如果 controls 屬性值為 false 則設置 author 無效 binderror EventHandle 當發生錯誤時觸發 error 事件，detail = {errMsg: MediaError.code} bindplay EventHandle 當開始/繼續播放時觸發play事件 bindpause EventHandle 當暫停播放時觸發 pause 事件 bindtimeupdate EventHandle 當播放進度改變時觸發 timeupdate 事件，detail = {currentTime, duration} bindended EventHandle 當播放到末尾時觸發 ended 事件 MediaError.code ``` **返回錯誤碼 描述** ``` 1 獲取資源被用戶禁止 2 網絡錯誤 3 解碼錯誤 4 不合適資源 ``` **示例：** ``` <template> <view> <view class="page-body"> <view class="page-section page-section-gap" style="text-align: center;"> <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio> </view> </view> </view> </template> export default { data() { return { title: 'audio', current: { poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg', name: '致愛麗絲', author: '暫無', src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3', }, audioAction: { method: 'pause' } } } } ```