cover-image 图片视图

解释:覆盖在原生组件之上的图片视图(与 cover-view 相比,仅支持图片),支持嵌套在 cover-view 里。

# 属性说明

属性名 类型 默认值 必填 说明
src String 图标路径,支持临时路径、网络地址。暂不支持 base64 格式。
bindload EventHandle 图片加载成功时触发
binderror EventHandle 图片加载失败时触发

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例 :图片视图

    <view class="wrap">
        <view class="card-area">
            <map 
                class="map"
                longitude="{{longitude}}"
                latitude="{{latitude}}">
                <cover-image 
                    class="cover-image"
                    src="https://b.bdstatic.com/miniapp/image/cover-image.png"
                    bindload="imageLoad"
                    binderror="imageError">
                </cover-image>
            </map>
        </view>
    </view>
    
    Page({
        data: {
            latitude: '40.042500',
            longitude: '116.274040'
        },
        imageLoad(e) {
            console.log('image', e.type);
        },
        imageError(e) {
            console.log('image', e.type);
        }
    });
    
    .map { 
        width: 100%;
        height: 2.67rem;
    }
    
    .cover-image {
        width: 1.93rem;
        height: .89rem;
        margin: 25% 25%;
    }
    

    # Bug & Tip

    • Tip:支持 css transition 动画,transition-property 只支持 transform (translateX, translateY) 与 opacity。
    • Tip:文本建议都套上 cover-view 标签,避免排版错误。
    • Tip:只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible 等。
    • Tip:建议子节点不要溢出父节点。
    • Tip:默认设置的样式有:white-space: nowrap; line-height: 1.2; display: block。
    • Tip:建议不要频繁改变 s-if 表达式的值控制显隐,否则会导致 cover-view 显示异常。
    • Bug:IOS端暂不支持一个页面有多个video时嵌套cover-view。
    • Tip:cover-view 和 cover-image 从基础库版本1.12.0开始支持事件捕获、冒泡。
    • Tip:cover-image和cover-view的渲染顺序与页面中的标签使用顺序一致。