小程序
小游戏
企业微信
微信支付
扫描小程序码分享
页面中的一些图片在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
:
70
rpx;
}
.pic_con{
width
:
600
rpx;
height
:
855
rpx;
box-shadow:
2px
2px
8px
#ddd
;
margin
:
0
auto
;
border-radius:
8
rpx;
background-color
:
#fcfcfc
;
}
.pic_con .pic_ad{
display
:
block
;
height
:
100%
;
width
:
100%
;
}
.pic_con .pic_place{
width
:
200
rpx;
height
:
200
rpx;
display
:
block
;
margin
:
0
auto
;
position
:
relative
;
top
:
320
rpx;
}
.opera-box{
padding
:
20
rpx
5%
;
font-size
:
0
;
text-align
:
center
;
margin-top
:
60
rpx;
}
.opera-box .btn-box{
width
:
40%
;
margin
:
0
5%
;
display
: inline-
block
;
height
:
80
rpx;
line-height
:
80
rpx;
border-radius:
40
rpx;
text-align
:
center
;
color
:
#fff
;
position
:
relative
;
}
.opera-box .btn-box text{
height
:
80
rpx;
line-height
:
80
rpx;
border-radius:
40
rpx;
display
:
block
;
text-align
:
center
;
color
:
#fff
;
font-size
:
30
rpx;
}
.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();
}
})
}
})
}
})
这是这几个文件对应的代码
这样可以吗