# cover-image

Image view overlaid on native component. Overridable native components are the same as cover-view, support nesting in cover-view.

Platform Difference Description

App H5 微信小程序 支付宝小程序 百度小程序 抖音小程序、飞书小程序 QQ小程序 快应用 360小程序 快手小程序 京东小程序
x x

Property description

property name type default value description platform difference description
src String 图标路径。支持本地路径、网络路径。不支持 base64 格式。
@load eventhandle 图片加载成功时触发 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序
@error eventhandle 图片加载失败时触发 微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序

Overridable native components on app-vue: <video>,<map>

Supported events: click

Unsupported CSS

  • position: fixed
  • opacity
  • overflow
  • padding
  • linebreak
  • white-space

Note: nvue's cover-view is not in the above restrictions, it only supports and fully supports all css of nvue.


  • Nesting of other components in cover-view and cover-image on the app-side vue page, including nesting cover-view again, can only cover video, map. App-side nvue pages do not have these restrictions since 2.1.5.
  • App端 cover-image 使用本地图像的话,打包前需要设置资源为释放模式,在manifest文件内app-plus新增runmode节点,设置值为liberate。

Example View Demo

The following sample code is from hello uni-app project, it is recommended to use HBuilderX, create a new uni-app project, and select the hello uni-app template, you can directly experience the complete Example.




<!-- This example does not contain the complete css, please refer to the above to obtain the external chain css, and view it in the hello uni-app project -->
	<view class="page">
		<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="true" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
			<cover-view class="controls-title">简单的自定义 controls</cover-view>
			<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
			<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
On This Page