【uniapp小程序】覆盖图片容器cover-image

最新推荐文章于 2026-05-07 08:13:57 发布

原创最新推荐文章于 2026-05-07 08:13:57 发布 · 3.1k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序（黑马）

本文介绍了uniapp框架中的cover-image组件，它用于覆盖原生组件如map和video之上。cover-image与cover-view相似，但用于显示图片。文章详细讲解了cover-image的属性如src和事件如@load、@error，同时强调了在不同平台的兼容性和限制，例如在App端的限制、图片本地路径设置以及在video组件中的应用。此外，还提到了各小程序平台的特性和限制，如百度小程序和支付宝小程序的特定行为。

🎁写在前面：

观众老爷们好呀，这里是前端小刘不怕牛牛频道，小程序系列文章又更新了呀。

上文我们补充了一点微信小程序的知识，那么今天我们就来学习一下，uniapp框架的实用组件——覆盖图片容器cover-image

文章目录

- 一，基础知识
- 二，注意点

一，基础知识

cover-image组件和之前提到的cover-view组件一样，都具有覆盖在原生组件之上的功能，前者可以称为图片视图。

首先，我们需要知道，小程序的渲染模式是从上往下的，也就有了层级之分
覆盖其实就是在设计的时候，程序员为了实现某个元素可以直接放某些原生组件的上层，定义了这个有cover功能的组件
可覆盖的原生组件与cover-view组件一样，有map、video、textarea、canvas
cover-image组件可以嵌套在cover-view组件中，一般会用在某个需要覆盖在上层的自定义组件上
属性
1. src，用来设置图片的路径，支持本地路径和网络路径，不支持base64格式
  这个基本跟image组件差不多，正常设置就行
2. @load，值为事件句柄，在图片加载完毕后调用
3. @error，值为事件句柄，在图片加载失败时调用
支持的事件是click
不支持的CSS样式属性有：position:fixed、opacity、overflow、padding、line-break、white-space

二，注意点

App端vue页面的 cover-view、cover-image 组件中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。换句话说，禁止多次套娃！
不过App端nvue页面自2.1.5起就没有这些限制
App端 cover-image 使用本地图像的话，打包前需要设置资源为释放模式，也就是在manifest文件内app-plus新增runmode节点，设置值为liberate。
App端还可以使用plus.nativeObj.view绘制原生内容
App端还提供了更灵活和强大的subNvue，参考原生子窗体subNvue
在 video 组件中使用时，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue页面可实现。
在App端，如果重度使用video和map，推荐使用nvue页面。
百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view。
支付宝小程序中 cover-view 不支持嵌套。