cover-image

覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

平台差异说明

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

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.28

属性说明

属性名	类型	默认值	说明	平台差异说明
src	String		图标路径。支持本地路径、网络路径。不支持 base64 格式。
@load	eventhandle		图片加载成功时触发	微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序
@error	eventhandle		图片加载失败时触发	微信小程序 2.1.0、百度小程序、QQ小程序、快手小程序、京东小程序

app-vue上可覆盖的原生组件：<video>、<map>

支持的事件：click

不支持的 CSS

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

注意：nvue的cover-view不在上述限制中，它仅支持且全部支持nvue的所有css。

Tips

• App端vue页面 cover-view、cover-image 中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。App端nvue页面自2.1.5起没有这些限制。
• App端 cover-image 使用本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。

示例 查看演示

以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。

Template

Script

Style

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<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>
		</video>
	</view>
</template>