小程序
小游戏
企业微信
微信支付
扫描小程序码分享
页面中的一些图片在ios手机下不能正常渲染，显示空白，点击打开控制台图片才会渲染出来，请问这是什么问题？有其他人遇到过类似的问题吗？
11 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，我们定位一下问题
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
请提供一下具体的样式
请提供一下能复现问题的简单代码示例。
你好，麻烦更新到最新版微信尝试一下？
@晨 遇到挺类似的问题，一打开页面后图片是设置了margin-top的，但图片位置错位了，但只要手指在屏幕上滑动一下或随便点一个按钮，图片就会立刻去到应该到的margin-top位置，感觉是会不会显示未刷新的原因，只有ios系统才会这样，请教一下解决方法，非常感谢
@晨 你好，ios图片不渲染的情况依然存在。页面滑动一下，或者点开控制台会立刻显示。和轮播图第一张图片不显示的情况类似。
好的 这边幻灯单张图片的时候也会有渲染不出来的情况，点一下其它页面再点回来就又可以了
先把文件下载到本地临时路径，可以显示出来了。网络图片不能显示吗
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;}
page{
background-color
:
#F6F6F6
;
}
.share_wrap{
padding-top
70
rpx;
.pic_con{
width
600
height
855
box-shadow:
2px
8px
#ddd
margin
0
auto
border-radius:
8
#fcfcfc
.pic_con .pic_ad{
display
block
100%
.pic_con .pic_place{
200
position
relative
top
320
.opera-box{
padding
20
rpx
5%
font-size
text-align
center
margin-top
60
.opera-box .btn-box{
40%
: inline-
80
line-height
40
color
#fff
.opera-box .btn-box text{
30
.opera-box .btn-box.bg-orange{
#FF8B4F
.opera-box .btn-box.bg-
green
{
#00D6D5
.opera-box button{
opacity:
absolute
<
view
class
=
"share_wrap"
>
"pic_con"
wx:if="{{sharedata.shareUrl.length>0}}">
image
src
"{{sharedata.shareUrl}}"
"fade_in pic_ad"
mode
"aspectFit"
></
</
wx:if
"{{sharedata.shareUrl.length<=0}}"
"/images/img_place.png"
"fade_in pic_place"
"opera-box"
"btn-box bg-orange"
button
type
"primary"
open-type
"share"
text
>分享给朋友</
"btn-box bg-green"
bindtap
"saveImage"
>保存卡片</
<!--错误提示-->
"error-tip fade_in"
"{{errorTip.isShow}}"
{{errorTip.text}}
var
app = getApp();
Page({
data: {
},
onLoad:
function
(e) {
that =
this
that.setData({
sharedata: app.globalData.sharedata
})
console.log(that.data.sharedata);
onShareAppMessage:
() {
title =
.data.sharedata.shareTitle;
return
title: title,
path:
'/pages/index/index'
saveImage:
(){
imgpath =
.data.sharedata.shareUrl;
if
(imgpath.length<=0){
app.errorTip(that,
"海报图片不存在"
, 2000);
wx.showLoading({
title:
'正在保存'
,
mask:
true
time: 100000
wx.downloadFile({
url: imgpath,
success:
(res) {
console.log(res);
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
"图片保存成功"
fail(f) {
"图片保存失败"
complete(){
wx.hideLoading();
这是这几个文件对应的代码
这样可以吗
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，我们定位一下问题
请提供一下具体的样式
请提供一下能复现问题的简单代码示例。
你好，麻烦更新到最新版微信尝试一下？
@晨 遇到挺类似的问题，一打开页面后图片是设置了margin-top的，但图片位置错位了，但只要手指在屏幕上滑动一下或随便点一个按钮，图片就会立刻去到应该到的margin-top位置，感觉是会不会显示未刷新的原因，只有ios系统才会这样，请教一下解决方法，非常感谢
@晨 你好，ios图片不渲染的情况依然存在。页面滑动一下，或者点开控制台会立刻显示。和轮播图第一张图片不显示的情况类似。
好的 这边幻灯单张图片的时候也会有渲染不出来的情况，点一下其它页面再点回来就又可以了
先把文件下载到本地临时路径，可以显示出来了。网络图片不能显示吗
page{
background-color:#F6F6F6;
}
.share_wrap{
padding-top:70rpx;
}
.pic_con{
width:600rpx;
height:855rpx;
box-shadow:2px2px8px#ddd;
margin:0auto;
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:0auto;
position:relative;
top:320rpx;
}
.opera-box{
padding:20rpx5%;
font-size:0;
text-align:center;
margin-top:60rpx;
}
.opera-box .btn-box{
width:40%;
margin:05%;
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:0auto;
opacity:0;
position:absolute;
width:100%;
top:0;
}<viewclass="share_wrap"><viewclass="pic_con"><blockwx:if="{{sharedata.shareUrl.length>0}}"><imagesrc="{{sharedata.shareUrl}}"class="fade_in pic_ad"mode="aspectFit"></image></block><blockwx:if="{{sharedata.shareUrl.length<=0}}"><imagesrc="/images/img_place.png"class="fade_in pic_place"mode="aspectFit"></image></block></view><viewclass="opera-box"><viewclass="btn-box bg-orange"><buttontype="primary"open-type="share"></button><text>分享给朋友</text></view><viewclass="btn-box bg-green"bindtap="saveImage"><buttontype="primary"></button><text>保存卡片</text></view></view></view><!--错误提示--><viewclass="error-tip fade_in"wx:if="{{errorTip.isShow}}">{{errorTip.text}}</view>varapp = getApp();Page({data: {},onLoad:function(e) {varthat =this;that.setData({sharedata: app.globalData.sharedata})console.log(that.data.sharedata);},onShareAppMessage:function() {vartitle =this.data.sharedata.shareTitle;return{title: title,path:'/pages/index/index'}},saveImage:function(){varthat =this;varimgpath =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();}})}})}})这是![]()
这几个文件对应的代码
这样可以吗