[uniapp applet] view container cover-image

Analysis of the difference between cover-image and image

Article Directory

• 1. Attributes
• 2. Tips
• the difference

---

1. Attributes

• An image view overlaid on a native component.
• Overridable native components are the same cover-view, and support nesting cover-viewinside
• src, support icon path. Support local paths and network paths. The base64 format is not supported.
• This is basically the same as the image component, just set it normally
• @load, triggered when the image is loaded successfully
• @error, triggered when the image load fails
• The supported event is click
• Unsupported CSS: position: fixed, opacity, overflow, padding, line-break, white-space

2. Tips

• Nesting of other components is not supported in vue pages on the app side  cover-view, cover-image including re-nesting , cover-viewwhich can only be overwritten video. mapApp-side nvue pages do not have these restrictions since 2.1.5.
• If the App side  cover-image uses local images, you need to set the resource to release mode before packaging, add a new runmode node to app-plus in the manifest file, and set the value to liberate.
• App side can also use plus.nativeObj.view to draw native content, refer to: Use 5+ interface controls in uni-app (opens new window) , plus.nativeObj.view specification (opens new window)
• The App side also provides more flexible and powerful subNvue, refer to the native sub-form subNvue
• When used in the video component, if you want to use it in full-screen mode cover-view, it can only be realized on the WeChat applet and the nvue page on the App side.
• On the App side, if video and map are heavily used, it is recommended to use the nvue page.
• The iOS side of the Baidu applet does not support nesting of cover-views when there are multiple videos on a page.
• Nesting is not supported in Alipay applets  cover-view .

---

the difference

 In general, use the image tag. If you want your image not to be zoomed and keep the original image size, use cover-image.

There is no difference between the two simulators, but there will be problems on the real machine

The picture in cover-image will be suspended on the top layer. When you make a pop-up box, the picture in it will be displayed on the top layer, and the setting is invalid.

image can be placed on the bottom layer by setting z-index: -1, the specific effect is as follows

This is the effect of using cover-image

This is the effect of using image, and set z-index: -1