ios渲染图片空白
发布于 5 年前 作者 houxia 9798 次浏览 来自 问答

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

10 回复

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

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

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();
          }
        })
      }
    })
     
  }
})

这是

这几个文件对应的代码

这样可以吗

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

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

请提供一下具体的样式

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

你好，我们定位一下问题

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

回到顶部