公告列表
公告列表
收藏
回答

IOS系统部分图片不显示问题，求大神分析

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS iPhone; CPU iPhone OS 12_0_1 like Mac OS X IPhone 6 6.7.3

- 当前 Bug 的表现（可附上截图）





- 预期表现


产品轮播图正常显示


问题说明：


  1. 小程序体验版本，在IOS真机上部分网络图片不显示，安卓系统和开发模拟器上正常，从未出现过该问题。

  2. 两个不同的IPhone手机，图片在另一个IOS手机上正常显示，但又会丢失其他图片，丢失图片完全是随机的(图片格式是jpg和png)，在图片上绑定了预览图片方法，执行wx.previewImage方法传入不显示的图片地址，可正常预览

  3. 和swiper标签没有任何关系，在page中直接一个image标签也会随机图片不显示。

  4. 在后台查看nginx日志发现 访问图片的时候会在 jpg或者png后面加上/ 导致404，


    日志详情：

    2018/11/06 17:33:16 [error] 4776#5532: *417 "E:/card/shop/tab6_icon.png/index.html" is not found (3: The system cannot find the path specified), client: 115.60.16.122, server: www.m.baidu.com, request: "GET /card/shop/tab6_icon.png/ HTTP/1.1", host: "www.m.baidu.com", referrer: "https://servicewechat.com/wx9fcadf2030746bd2/0/page-frame.html"
     
    2018/11/06 17:33:16 [error] 4776#5532: *422 "E:/card/shop/product/show/liaoyiliao_icon.png/index.html" is not found (3: The system cannot find the path specified), client: 115.60.16.122, server: www.m.baidu.com, request: "GET /card/shop/product/show/liaoyiliao_icon.png/ HTTP/1.1", host: "www.m.baidu.com", referrer: "https://servicewechat.com/wx9fcadf2030746bd2/0/page-frame.html"
     
    2018/11/06 17:33:16 [error] 4776#5532: *420 "E:/card/shop/product/show/fenxiang.png/index.html" is not found (3: The system cannot find the path specified), client: 115.60.16.122, server: www.m.baidu.com, request: "GET /card/shop/product/show/fenxiang.png/ HTTP/1.1", host: "www.m.baidu.com", referrer: "https://servicewechat.com/wx9fcadf2030746bd2/0/page-frame.html"
     
    2018/11/06 17:33:16 [error] 4776#5532: *424 "E:/card/shop/product/show/shoucang.png/index.html" is not found (3: The system cannot find the path specified), client: 115.60.16.122, server: www.m.baidu.com, request: "GET /card/shop/product/show/shoucang.png/ HTTP/1.1", host: "www.m.baidu.com", referrer: "https://servicewechat.com/wx9fcadf2030746bd2/0/page-frame.html"
     
    2018/11/06 17:33:16 [error] 4776#5532: *424 "E:/files/20181017/0a73f4e7-14b8-4ea6-8a67-ad71f6fd83ba.jpg/index.html" is not found (3: The system cannot find the path specified), client: 115.60.16.122, server: www.m.baidu.com, request: "GET /files/20181017/0a73f4e7-14b8-4ea6-8a67-ad71f6fd83ba.jpg/ HTTP/1.1", host: "www.m.baidu.com", referrer: "https://servicewechat.com/wx9fcadf2030746bd2/0/page-frame.html"


    4. nginx配置

    

listen       443 ssl;
server_name  www.baidu.com baidu.com;
  
if ($http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)"){
      return 301   https://www.m.baidu.com$request_uri;
}


日志和nginx配置信息中我个域名替换成baidu.com，能说明问题就行，在配置中判断如果是手机端访问，则return 301


配置二


listen       443 ssl;
server_name  www.m.baidu.com m.baidu.com;
 
location ~/weixin/(card|files|wxxiaochengxuimgs) {
    root   E:\images;
}


微信小程序访问图片服务器，从baidu.com   301到m.baidu.com，然后直接读取硬盘图片资源


<swiper class='swiper' circular bindchange='_swiperbindchange'>
   <block wx:for='{{imagesList}}' wx:key="*this" wx:for-index='idx'>
     <swiper-item>
       <view class='productmasterimage'>
         <image src='{{item}}' mode='aspectFill' style='width:100%;height:750rpx;' bindtap='showmasterimage' data-index='{{idx}}'/>
         <image class='videoplay' wx:if='{{videocheck&&idx==0}}' src='{{video_big}}' style='width:116rpx;height:116rpx;' bindtap='_videoshow'/>
       </view>
     </swiper-item>
   </block>
 </swiper>


循环imagesList数组，image标签直接指向网络图片地址，网络协议是https，


- 复现路径


疑问：


1. IOS部分网络图片随机不显示，是服务器并发到最到拒绝？但我nginx设置的是

worker_rlimit_nofile 65535;
 
events {
    worker_connections 65535;
}


2. nginx配置问题


但安卓和模拟器可以正常访问到图片


3. 404？


真机调试，console栏里什么都没输出，没任何错误


5. 图片路径在IOS上没赋值成功


打开Wxml查看好好的啊


已经查阅N多资料，折腾了两周，问题还没解决，或许就差那一点点，大神们和腾讯官方给协助一下，谢谢~~

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

15 个回答

  • 123
    123
    2019-04-25

    我也遇到了类似的问题,iOS加载资源的时候,将小程序切到后台,再切回来,部分图片无法显示,不能显示的图片是随机的,困扰好久了,希望官方可以解决一下

    2019-04-25
    有用 1
    回复
  • 邱机
    邱机
    2018-12-10

    我也有类似问题，

    重显方法为：在页面上的网络图片未加载完成前，将小程序退到后台，再回到前台，图片无法显示
    2018-12-10
    有用 1
    回复 1
    • 123
      123
      2019-04-26

      请问,你的问题解决了吗,我也遇到一样的问题

      2019-04-26
      赞
      回复
  • 大猫
    大猫
    2021-11-24

    朋友，你这个问题最后是如何解决的呀？

    2021-11-24
    有用
    回复
  • 道系
    道系
    2019-09-16

    我也遇到了相同的问题。求指点啊。

    2019-09-16
    有用
    回复
  • 有余
    有余
    2019-03-12

    我也出现这个问题了  我的解决办法是  把 图片后面的参数都去掉就可以显示了

    https://mmbiz.qpic.cn/mmbiz_gif/aSgMPQswpgJzVAqBAePaLoaUrptPbIAH1aQia3bejSTgD4EeeVTPN85vb3tialxRibvbt3AcGV7M6aEhF785bGI8Q/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

    例如这个


    修改成        https://mmbiz.qpic.cn/mmbiz_gif/aSgMPQswpgJzVAqBAePaLoaUrptPbIAH1aQia3bejSTgD4EeeVTPN85vb3tialxRibvbt3AcGV7M6aEhF785bGI8Q/640

    就可以显示了

    2019-03-12
    有用
    回复 2
    • Geefib
      Geefib
      2019-03-12

      不行呀，我的是放在cdn上的没了后缀png就找不到文件了

      2019-03-12
      赞
      回复
    • 有余
      有余
      2019-03-12回复Geefib

      让我看看你的图片路径

      2019-03-12
      赞
      回复
  • 小程序开发者
    小程序开发者
    2019-02-01

    请问这个问题解决了吗 ？ 我也遇到了

    2019-02-01
    有用
    回复
  • ipeng
    ipeng
    2019-01-07

    我们也遇到了这种问题，模拟器和安卓手机都可以显示网络图片，ios不可以，试了苹果6，苹果7p和Xr，都不显示。

    2019-01-07
    有用
    回复 7
    • 2019-01-07

      用背景图吧

      2019-01-07
      赞
      回复
    • ipeng
      ipeng
      2019-01-07回复

      背景图好像不可以根据来源图片的大小自适应等比例缩放的吧？

      2019-01-07
      赞
      回复
    • 2019-01-07回复ipeng

      额，需要设置bg-size

      2019-01-07
      赞
      回复
    • ipeng
      ipeng
      2019-01-07回复

      我这边主要是受到webp的影响，把图片路径里的webp去掉就好了。更干脆的做法是把图片后面携带的参数都去掉。比如：https://*****.jpg?tp=webp&***, 改成http://***.jpg , 就好了，刚测试过可以用。

      2019-01-07
      赞
      回复
    • 2019-01-07回复ipeng

      好的

      2019-01-07
      赞
      回复
    查看更多(2)
  • 2018-12-27

    有答案了吗  IOS网络路径图片不显示   开发工具安卓都没问题     6.7.4的微信

    2018-12-27
    有用
    回复
  • 安铭～charles
    安铭～charles
    2018-11-24

    我也遇到过， 但是我的是在安卓机， 小米mix2s上， 在调试工具中是能正常显示的 一个 http://img ， 但在安卓机上就显示不出来， 监控的error 也触发了， 错误信息是 404， 但是实际上是有这张图片的， 且在浏览器上也能正常范围。 这是什么原因

    2018-11-24
    有用
    回复 2
  • 心心情
    心心情
    2018-11-13

    一直以为是网络问题导致呢～也在想办法解决中。。。

    2018-11-13
    有用
    回复

正在加载...

请 登录 后发表内容
相关问题
相关文档