收藏
回答

图片设置圆角 会先闪一下 才变成圆图

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug image 客户端 6.6.6 1.9.91

图片设置圆角  会先闪一下 才变成圆图

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

9 个回答

  • 黄思程
    黄思程
    2018-05-16

    尝试加一个 will-change: transform 看看

    2018-05-16
    有用 3
    回复 1
    • 🐠糖醋鱼
      🐠糖醋鱼
      2018-10-20

      没有效果,这个问题我见好多开发者反馈过,但是貌似一直没有解决。好影响用户体验

      2018-10-20
      回复
  • 卢霄霄
    卢霄霄
    2018-05-11

    如果是在一般的view里显示,可以把图片放在一个和图等大小的view里,给view也设上border-radius,而且overflow:hidden。如果是scroll-view里,就不知道怎么操作了

    2018-05-11
    有用 1
    回复
  • 吕振雄
    吕振雄
    2018-05-17

    你的办法不错,很好,在没有判断的情况下,你的这个方法已经是最佳的实践了,如果存在判断的话,例如当后端返回的字段室友图片地址的话就显示图片地址的图片,如果返回的图片地址为空的话就显示默认图片这样子的话,浏览器会先判断是否图片地址是否false,之后在根据判断的结果渲染页面,会出现一瞬间的空白或者闪一下

    2018-05-17
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-11

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-05-11
    有用
    回复 3
    • 追小命
      追小命
      2018-05-12
      真的不需要代码片段 <image style="border-radius: 50%;" src= ".............."/> 就可以直接重现,无论是iOS还是安卓都有不同程度的闪烁。并且这个闪烁不止局限于小程序,在其他webview渲染的服务和网页里也时常可以看到。我的印象2017年年初还没这个问题,到了年终之后变得很明显,我们不得不调整代码,因为满屏logo我们都用了圆角。
      2018-05-12
      回复
    • 追小命
      追小命
      2018-05-12
      既然要片段好的:wechatide://minicode/mvl7Glm56CZP 再来一个iphone7+的屏幕录像视频:http://cdn.raceonhills.com/feed/shabu2018/1fce78abbcde78de2a14b048a179597c1526071834194.mp4
      2018-05-12
      回复
    • 吕振雄
      吕振雄
      2018-05-17
      你的办法不错,很好,在没有判断的情况下,你的这个方法已经是最佳的实践了,如果存在判断的话,例如当后端返回的字段室友图片地址的话就显示图片地址的图片,如果返回的图片地址为空的话就显示默认图片这样子的话,浏览器会先判断是否图片地址是否false,之后在根据判断的结果渲染页面,会出现一瞬间的空白或者闪一下
      2018-05-17
      回复
  • 旋
    2018-05-11

    华为nova青春版   微信版本 6.6.6

    2018-05-11
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-05-11

    麻烦提供一下出现问题的机型和微信版本,并且给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-05-11
    有用
    回复 1
    • 追小命
      追小命
      2018-05-12
      相关其他用户反馈: https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000842d5b38208e17e761455c54c00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000842d5b38208e17e761455c54c00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=0000cc74b14090d04c360e4b656c00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000280015280a0882d2643e9f5bc00&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=25ccf1838754886f1e53c18f1198b865&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=3edb1676498d5124e8dfd4bd2ad6bc5e&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=b1ab186aed9b9f7a4d6c7c98f3f6f537&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=1e091ecb820e50c683b6d0b655a1e390&highline=border-radius https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=1e091ecb820e50c683b6d0b655a1e390&highline=border-radius
      2018-05-12
      回复
  • 追小命
    追小命
    2018-05-11

    这个问题困扰我们很久了,因为图标多这个特别烦人。但发现微信里很多情况都存在这个问题,不单单是小程序。


    我的方法是直接在view里设置background image,就没这个问题了。


    <view style="background-image: url('{{item.cover_image}}');" class="race-logo-small backimg"></view>


    但的确还是希望官方可以注意下这个问题。虽然可能已经是整个微信内置webview的问题了

    2018-05-11
    有用
    回复 1
    • 吕振雄
      吕振雄
      2018-05-17
      你的办法不错,很好,在没有判断的情况下,你的这个方法已经是最佳的实践了,如果存在判断的话,例如当后端返回的字段室友图片地址的话就显示图片地址的图片,如果返回的图片地址为空的话就显示默认图片这样子的话,浏览器会先判断是否图片地址是否false,之后在根据判断的结果渲染页面,会出现一瞬间的空白或者闪一下
      2018-05-17
      回复
  • 旋
    2018-05-11

    有的机子闪的比较快,我这个华为nava的,很明显

    2018-05-11
    有用
    回复
  • 旋
    2018-05-11

    我在外面也套了一个view,这样设置过了,可是还是会闪一下


    2018-05-11
    有用
    回复
登录 后发表内容