Skip to main content
Version: 3.x

CoverImage

Image view above native components. Native components that can be covered are the same as those in cover-view. It can be nested into cover-view.

Reference

Type

ComponentType<CoverImageProps>

Examples

// js
class App extends Components {
render () {
return (
<View className='container'>
<Video id='myVideo' src='src'>
<CoverView className='controls'>
<CoverView className='play' onClick='play'>
<CoverImage className='img' src='src' />
</CoverView>
</CoverView>
</Video>
</View>
)
}
}
// css
.container {
position: relative;
}
.controls {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 225px;
transform: translate(-50%, -50%);
}

CoverImageProps

PropertyTypeRequiredDescription
srcstringYesThe path of the icon.Temporary paths, network addresses, and cloud file IDs are supported.Base64 encoded strings are not supported.
onLoadBaseEventOrigFunction<any>NoTriggered when an image is loaded.
onErrorBaseEventOrigFunction<any>NoTriggered when image loading failed.

Property Support

PropertyWeChat Mini-ProgramH5React Native
CoverImageProps.src✔️
CoverImageProps.onLoad✔️
CoverImageProps.onError✔️

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramH5React Native
CoverImage✔️✔️✔️