收藏
回答

cover-image与border-radius有冲突

API/组件名称 终端类型 微信版本 基础库版本
cover-image 客户端 6.6.1 1.9.1

在IOS真机中,


如果cover-image 在进入页面时就是显示的,wxss上设置border-radius没有问题。


但如果cover-image开始是隐藏的,通过事件展示出来,如果设置了border-radius,那么该图片怎么都不会显示出来。

回答关注问题邀请回答
收藏

6 个回答

  • 黄思程
    黄思程
    2018-01-19

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码示例。

    2018-01-19
    有用
    回复
  • 杨盛盛
    杨盛盛
    2018-01-25

    测出来解决方案了



    cover-image无法展示的代码:


    test.wxtml

    <cover-view class="reward-wrap {{showReward}}">

       <cover-image class="reward-usr-img" src="{{ usrImgSrc1 }}"></cover-image>

    </cover-view>


    test.wxss

    .reward-model{

        display:none;

    }

    .reward-model.show-reward{

        display: block;

    }




    cover-image可以展示的代码:



    test.wxtml

    <cover-view wx-if="{{showReward === 'show-reward'}}" class="reward-wrap">

       <cover-image class="reward-usr-img" src="{{ usrImgSrc1 }}"></cover-image>

    </cover-view>


    test.wxss

    .reward-model{

        display:none;

    }

    .reward-model.show-reward{

        display: block;

    }


    两个test.js都是一样的


    showRewardDialog: function () {    // 展示

        this.setData({

            showReward: 'show-reward'

        })

    }



    结论:用样式控制展示 会出现cover-image 图片不能显示的问题,wx-if则正常


    2018-01-25
    有用 1
    回复
  • 杨盛盛
    杨盛盛
    2018-01-25

    你好,这两天发现了,不是border-radius的问题。

    关于隐藏的 cover-image 设置完路径后展示不出来的描述:


    这里cover-image的src是通过字段动态设置的,如果这个字段设置的是相对路径,则不会有问题;如果该字段是设置的绝对路径, 比如:https://xxx.xxx.xxx, 同时进入页面时这个标签(或者是该标签的父级)是隐藏的话,通过事件显示这个cover-image,则src值设置上去了,但图片不会显示。


    做了很多测试,安卓机和模拟器上都没有问题,IOS统统有问题

    2018-01-25
    有用 1
    回复 2
    • Mr Yang
      Mr Yang
      2021-07-28
      有什么办法能解决吗
      2021-07-28
      回复
    • pyw
      pyw
      2021-08-22
      我也是这个场景,cover-image默认隐藏的(display:none),通过用户交互动态显示出来,路径是绝对值(https...),在iOS真机无法显示,但是开发环境里一切正常。请问是如何解决的呢?
      2021-08-22
      回复
  • Lyzzz
    Lyzzz
    2023-02-03

    .wxml

    <map style="width:100%;height:400rpx;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}">
      <cover-view slot="callout">
        <block wx:for="{{markers}}" wx:key="*this">
          <cover-view class="customCallout" marker-id="{{item.id}}">
            <cover-image class="icon" src="{{item.icon}}"></cover-image>
          </cover-view>
        </block>
      </cover-view>
    </map>
    

    .wxss

    .customCallout {
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
      overflow: hidden;
    }
    .icon {
      width: 40px;
      height: 40px;
    }
    

    没用css控制图片显隐,但是也会偶发有src图片却未加载的情况

    2023-02-03
    有用
    回复
  • 🍩
    🍩
    2020-08-15

    插眼

    2020-08-15
    有用
    回复
  • LOUSANPANG
    LOUSANPANG
    2019-07-19

    这个问题解决了吗

    2019-07-19
    有用
    回复
登录 后发表内容