收藏
回答

ios渲染图片空白

问题模块
API和组件


页面中的一些图片在ios手机下不能正常渲染,显示空白,点击打开控制台图片才会渲染出来,请问这是什么问题?有其他人遇到过类似的问题吗?

最后一次编辑于  2017-08-23
回答关注问题邀请回答
收藏

11 个回答

  • Simon
    Simon
    2017-11-10

    @晨 遇到挺类似的问题,一打开页面后图片是设置了margin-top的,但图片位置错位了,但只要手指在屏幕上滑动一下或随便点一个按钮,图片就会立刻去到应该到的margin-top位置,感觉是会不会显示未刷新的原因,只有ios系统才会这样,请教一下解决方法,非常感谢

    2017-11-10
    赞同
    回复
  • M.J
    M.J
    2017-09-26

    @晨 你好,ios图片不渲染的情况依然存在。页面滑动一下,或者点开控制台会立刻显示。和轮播图第一张图片不显示的情况类似。

    2017-09-26
    赞同
    回复
  • 娇
    2017-08-25

    好的 这边幻灯单张图片的时候也会有渲染不出来的情况,点一下其它页面再点回来就又可以了

    2017-08-25
    赞同
    回复
  • 晨
    2017-08-24

    你好,我们定位一下问题

    2017-08-24
    赞同
    回复
  • 娇
    2017-08-23

    先把文件下载到本地临时路径,可以显示出来了。网络图片不能显示吗

    2017-08-23
    赞同
    回复
  • 娇
    2017-08-23

    page{
      background-color: #F6F6F6;
    }
    .share_wrap{
      padding-top: 70rpx;
    }
    .pic_con{
      width: 600rpx;
      height: 855rpx;
      box-shadow: 2px 2px 8px #ddd;
      margin:0 auto;
      border-radius: 8rpx;
      background-color: #fcfcfc;
    }
    .pic_con .pic_ad{
      display: block;
      height: 100%;
      width: 100%;
    }
    .pic_con .pic_place{
      width: 200rpx;
      height: 200rpx;
      display: block;
      margin:0 auto;
      position: relative;
      top: 320rpx;
    }
    .opera-box{
      padding: 20rpx 5%;
      font-size: 0;
      text-align: center;
      margin-top:60rpx;
    }
    .opera-box .btn-box{
      width: 40%;
      margin:0 5%;
      display: inline-block;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      color: #fff;
      position: relative;
    }
    .opera-box .btn-box text{
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      display: block;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
    }
    .opera-box .btn-box.bg-orange{
      background-color: #FF8B4F;
    }
    .opera-box .btn-box.bg-green{
      background-color: #00D6D5;
    }
    .opera-box button{
      margin:0 auto;
      opacity: 0;
      position: absolute;
      width: 100%;
      top:0;
    }

    <view class="share_wrap">
      <view class="pic_con">
        <block  wx:if="{{sharedata.shareUrl.length>0}}">
        <image src="{{sharedata.shareUrl}}" class="fade_in pic_ad" mode="aspectFit"></image>
        </block>
        <block wx:if="{{sharedata.shareUrl.length<=0}}">
          <image src="/images/img_place.png" class="fade_in pic_place" mode="aspectFit"></image>
        </block>
      </view>
      <view class="opera-box">
        <view class="btn-box bg-orange">
          <button type="primary" open-type="share"></button>
          <text>分享给朋友</text>
        </view>
        <view class="btn-box bg-green" bindtap="saveImage">
          <button type="primary"></button>
          <text>保存卡片</text>
        </view>
      </view>
    </view>
    <!--错误提示-->
    <view class="error-tip fade_in" wx:if="{{errorTip.isShow}}">
      {{errorTip.text}}
    </view>
    var app = getApp();
    Page({
      data: {
         
      },
      onLoad: function (e) {
        var that = this;
        that.setData({
          sharedata: app.globalData.sharedata
        })
        console.log(that.data.sharedata);
      },
      onShareAppMessage: function () {
        var title = this.data.sharedata.shareTitle;
        return {
          title: title,
          path: '/pages/index/index'
        }
      },
      saveImage:function(){
        var that = this;
        var imgpath = this.data.sharedata.shareUrl;
        if (imgpath.length<=0){
          app.errorTip(that, "海报图片不存在", 2000);
          return;
        }
        wx.showLoading({
          title: '正在保存',
          mask: true,
          time: 100000
        })
        wx.downloadFile({
          url: imgpath,
          success: function (res) {
            console.log(res);
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                console.log(res);
                app.errorTip(that, "图片保存成功", 2000);
              },
              fail(f) {
                app.errorTip(that, "图片保存失败", 2000);
              },
              complete(){
                wx.hideLoading();
              }
            })
          }
        })
         
      }
    })

    这是这几个文件对应的代码

    2017-08-23
    赞同
    回复
  • 晨
    2017-08-23

    请提供一下具体的样式

    2017-08-23
    赞同
    回复
  • 娇
    2017-08-23


    这样可以吗

    2017-08-23
    赞同
    回复
  • 晨
    2017-08-23

    请提供一下能复现问题的简单代码示例。

    2017-08-23
    赞同
    回复
  • 娇
    2017-08-23

    微信是最新版的,还是这样,只有ios有这种问题,一直没找到原因

    2017-08-23
    赞同
    回复

正在加载...