收藏
回答

cover-image加载问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug cover-image 客户端 6.6.7 2.0.9

嵌套在map组件内的cover-image

<cover-view class="detail-box" hidden="{{!spotDetail.show}}" catchtap="markersMenuTap" id="1">
      <cover-view class="flex-h img-title">
        <!--发现cover-image没有加wx:if,首次图片会渲染不了 -->
        <cover-view class="img-box">
          <cover-image class="img" src="{{spotDetail.newPlaceImgUrl}}" wx:if="{{spotDetail.newPlaceImgUrl}}" binderror="detailImgErr" bindload="detailImgLoad"></cover-image>
          <cover-image class="play" src="{{audio.isPlay?'../../img/pause-icon-v2.png':'../../img/play-icon-v2.png'}}" catchtap="audioSpotDetail" wx:if="{{spotDetail.type==='spot'&&spotDetail.isHaveExplainContents}}"></cover-image>
        </cover-view>
        <cover-view class="title-box">
          <cover-view class="title">{{spotDetail.title}}</cover-view>
          <cover-view class="btn" catchtap="markersMenuTap" id="2">前往</cover-view>
        </cover-view>
      </cover-view>
</cover-view>
.detail-box {
  position: absolute;
  bottom: 0;
  padding: 39rpx 39rpx;
  width: 100%;
  /* height: 462rpx; */
  background: white;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.detail-box .close-btn {
  display: block;
  position: absolute;
  top: 0;
  right: 39rpx;
  width: 60rpx;
  height: 60rpx;
  text-align: center;
}
 
.detail-box .close-btn cover-image {
  margin: 18rpx auto;
  width: 39rpx;
  height: 39rpx;
  /* line-height: auto; */
}
 
.detail-box .img-title {
  position: relative;
  font-size: 32rpx;
  color: #363636;
  line-height: 48rpx;
  overflow: hidden;
}
 
.img-title .img-box {
  position: relative;
  margin-right: 27rpx;
  width: 180rpx;
  height: 180rpx;
}
 
.img-box .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px transparent;
  border-radius: 9rpx;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 
.img-box .play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -42rpx -42rpx;
  width: 84rpx;
  height: 84rpx;
}
 
.img-title .title {
  margin-bottom: 15rpx;
  width: 426rpx;
  height: 99rpx;
  line-height: 51rpx;
  font-size: 32rpx;
  color: #363636;
  overflow: hidden;
  white-space: pre-wrap;
}


父容器用的absolute定位,,图片父容器用的relative定位,图片是absolute定位。


会出现cover-image.img使用的阿里云cdn地址图片,但是IOS经常渲染不出来,加了bindload和binderror发现能正常进入load函数,可是图片是空白的



被cover-image加了border和wx:if都没办法解决。。如果有遇到的朋友希望告知下是什么原因导致的。怎么解决


最后一次编辑于  2018-06-25  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • 晨
    2018-06-25

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-06-25
    赞同
    回复
  • ......
    ......
    2018-07-11

    ios 和 安卓都碰到同样问题

    2018-07-11
    赞同
    回复
  • 林上皓
    林上皓
    2018-08-24

    请问解决了么?我也遇到了这个问题

    2018-08-24
    赞同
    回复 1
    • 棉花糖
      棉花糖
      2018-09-06

      没有,

      2018-09-06
      回复