覆盖图片组件

cover-image 组件是 Uniapp 中用于覆盖在原生组件上的图片视图。它与 cover-view 组件类似，可以与 cover-view 配合使用，适用于需要在原生组件如 video、map 等上层显示图片的场景。该组件的作用是确保在这些原生组件之上显示图片，不受原生控件高渲染层级的影响。

1. 什么是 cover-image 组件？

cover-image 组件是专门用于覆盖在诸如 video、map 等原生组件上显示图片的组件，确保图片可以覆盖在这些原生组件之上，且支持嵌套在 cover-view 中。常见于播放按钮、暂停按钮等场景，特别是在视频播放器或地图上添加自定义图标或按钮。

使用场景

• 视频播放器控件：在 video 组件上覆盖播放、暂停等自定义按钮图标。
• 地图标注：在 map 组件上覆盖自定义图标，方便用户进行操作。
• 原生组件交互：为原生组件添加交互性图片视图，实现控制操作。

2. cover-image 组件的常用属性

cover-image 提供了少量的属性用于图片路径设置和事件监听，以下是主要属性的说明：

属性名	类型	说明	平台差异说明
src	String	图片路径，支持本地路径、网络路径，但不支持 base64 格式。	无
@load	eventhandle	图片加载成功时触发。	微信小程序 2.1.0+
@error	eventhandle	图片加载失败时触发。	微信小程序 2.1.0+

2.1 图片路径 src

• 说明：设置图片的路径，支持本地路径和网络路径，注意不能使用 base64 格式。
• 使用场景：当需要在 video 或 map 组件上显示自定义图标时，可通过 src 指定图片路径。

<template>
  <cover-image src="/static/play.png" class="img"></cover-image>
</template>

<style scoped>
.img {
  width: 100rpx;
  height: 100rpx;
}
</style>

2.2 图片加载事件 @load

• 说明：图片加载成功时触发此事件，可以用来进行成功提示或加载计时。
• 使用场景：在需要确保图片加载成功后执行某些操作时，监听 @load 事件。

<template>
  <cover-image src="/static/pause.png" @load="onLoad"></cover-image>
</template>

<script setup>
const onLoad = () => {
  console.log('图片加载成功');
}
</script>

2.3 图片加载失败事件 @error

• 说明：当图片加载失败时触发此事件，可用于提示用户图片无法加载或进行备用图片的切换。
• 使用场景：网络图片加载失败时，通过 @error 事件反馈信息并采取相应措施。

<template>
  <cover-image src="https://invalid-url.png" @error="onError"></cover-image>
</template>

<script setup>
const onError = () => {
  console.log('图片加载失败');
}
</script>

---

3. 视频播放器上显示控制按钮案例

以下案例展示了如何在 video 组件上使用 cover-view 和 cover-image 实现播放、暂停按钮的交互。通过 cover-image 显示播放和暂停图标，并结合事件监听实现视频播放控制。

<template>
  <view class="container">
    <!-- 原生 video 组件 -->
    <video class="video" id="videoPlayer" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>

    <!-- 覆盖层，用于显示自定义控件 -->
    <cover-view class="cover-controls">
      <cover-image class="play-button" src="/static/play.png" @click="playVideo"></cover-image>
      <cover-image class="pause-button" src="/static/pause.png" @click="pauseVideo"></cover-image>
    </cover-view>
  </view>
</template>

<script setup>
const playVideo = () => {
  const video = document.getElementById('videoPlayer');
  if (video) video.play();
};

const pauseVideo = () => {
  const video = document.getElementById('videoPlayer');
  if (video) video.pause();
};
</script>

<style scoped>
/* 容器样式 */
.container {
  position: relative;
  width: 100%;
  height: 300px;
}

/* video 样式 */
.video {
  width: 100%;
  height: 100%;
}

/* 控件覆盖层 */
.cover-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

/* 播放按钮 */
.play-button {
  width: 50rpx;
  height: 50rpx;
  margin-left: 20rpx;
}

/* 暂停按钮 */
.pause-button {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}
</style>

代码解析

1. video 组件：加载了一个视频源，并设置了播放控件，通过 id 标识符来操作视频播放与暂停。
2. cover-view 和 cover-image 结合：通过 cover-view 作为覆盖层，嵌套两个 cover-image 作为播放和暂停按钮，并设置点击事件进行视频控制。
3. 样式设计：使用 position: absolute 将 cover-view 覆盖在 video 上，按钮则分别放置在播放与暂停位置。