<image class='carousel' src="/images/图片301@2x.png"></image>
 
电脑上显示图片，但手机上是空白的
 
 
 
<image class='carousel' src="/images/301@2x.png"></image>
 
电脑上显示图片，手机上也显示图片
 
 
 
由此可见，微信小程序中，图片名不能出现中文，图片路径不能出现中文。

写在前面：
 
进行小程序开发的时候，突然发现一个如此诡异的问题：小程序本地图片在编辑器上能显示，在手机上不显示？带着这个问题可能和大家解决问的步骤一样，先惊讶一番、然后去网上找各种帖子，发现绝大部分帖子压根没有说到正点上，纯属一顿乱猜，没有去根据现象思考为什么不能在手机上显示，有的还相互抄袭、、、我实在看不下去了，所以就写了今天这篇帖子！文中我大致来分析了一下原因是什么？纯属个人见解，如有不对之处，欢迎各位大佬来喷！
 
 
现象描述：
 
再说一遍现象：小程序本地静态图片在编辑器上能显示，在手机上不显示？（注意：本文讲的核心是本地图片）
 
 
问题分析：
 
造成这种问题99%的原因是因为图片路径不对！！！
 
什么？什么？什么？路径不对？
 那你可能会问了：“为什么在编辑器上就能显示了？”
 你这个问题问的正是这篇文章要说明的。就是这么恰好让你感觉不可能发生的事情就这么变得十分可能！
 
一般情况下，我们都知道，如果图片的地址路径写的不对，那无论在手机上还是在编辑器上都不能显示出来，正是这个原因，极容易让你忽略检查自己的本地图片路径的正确性。**如何解决呢？**请大佬们继续向下看：
 
例子说明：
 
下图是正确的图片引用路径，无数据时的图片在本地images文件夹中，
 图中代码的引用路径是：“…/…/…/images/icon-no-message.png”(这个图标一定存在)；
 这种图片引用都没疑问吧！不负众望，图片正常显示了出来（注意文件层深）
 
 
重点部分：
 
上面废话了一大堆，急死我了，终于引出了重点中的重点；
 再看一下下面这种写法，文件还是上图那个文件，下图中唯一与上图不同的地方就是图片的引用地址，
 下面这个地址是我瞎写的，很明显，我的文件目录根本没有那么深，而我却用了很多个…/…/…/…/…/、、、这时如果在手机上预览，就出现手机上图片不显示，而编辑器上正常显示。
 
 
问题就出现在这里
 小程序编辑器与其他编辑器在这个地方并不完全一致。小程序编辑器中：如果你一直返回上一目录，返回到根目录时直接就处于根目录，从根目录再直接寻找第一个文件夹，例如“…/…/…/…/…/…/…/images/icon-no-message.png”，正常目录层深是3层就直接找到了images文件夹，但是，如果返回的层深大于当前层深，那么默认当前处于项目目录如下图：
 
 当遇到images时就是从项目目录开始寻找，这时肯定能找到，所以在编辑器中显示无误！
 
顺便看一下下面这个情况，如果到达images的层深是3层（…/…/…/images），我要写成向上查找2层呢(…/…/images)？小程序编辑器也能找到吗？
 
 
结果很明显，无法找到啊！！！
 
 
在线图片类似问题解决方案：
 
2019-05-30更新：在线图片如果出现类似问题请查看一下是否有一下情景：
 1.小程序开发工具右上角->详情->域名、、、（编辑器上没有校验域名合法性，如下图）
 
 2.在手机端预览小程序时，域名必须是合法的、配置在小程序管理后台的，裸露ip无法在APP端预览到。此时的现象也是：在编辑器上能图片能显示，手机上无法预览！！！（多半都是服务端问题）
 
如何查看是不是这个问题导致？
 
1.小程序编辑器上直接真机扫码调试：（会有日志面板弹出，可直接查看日志）
 
 2.点击手机端小程序右上角的···按钮，开启调试（首先需成为小程序体验版用户）查看日志，如果域名问题会直接显示图片地址访问失败！
 
总结：
 
1.引用本地图片如果向上返回的层深大于等于该文件所在层深，那么在小程序编辑器中会正常显示；其中，大于该文件所在层深时，在手机上图片无法显示；
 2.引用图片时向上返回层深小于当前文件所在层深，图片在手机和编辑器中都不显示；
 
 
为了能及时的将自己踩到的前端坑（包括ionic,angular,ReactNative,小程序,APICloud）分享给大家，以后会逐渐将文章转移到微信公众号：前端e家（front_e_family）。可直接扫码关注，公众号会不定期更新新文章，分享踩坑笔记！期待您的关注！
 

做了一个钉钉小程序项目。
 
 明明是两张图片，但是在苹果手机上只显示一张。
 后台返回的图片在苹果手机上不显示。在安卓手机上正常显示。
 查看了一下后台返回的接口，一个是正常jpg结尾的，一个是有？后又连接字符串的。而有？连接的字符串的图片无法正常显示。
 
经过后端的不断测试，发现是因为苹果手机不支持webp
 解决办法：后端修改数据，或者前端对数据 进行二次处理经过判断后显示页面。
 
百度一下webp是啥
 
 
 
WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。
 
 
webp百度的支持。的确说了苹果手机不支持webp。
 
 
 
当前网页浏览器当中，Google Chrome和Opera原生支持静态与动态的WebP格式，而Google Chrome自12版开始支持WebP的渐进式解码功能。此外所有可以原生播放WebM影像的浏览器，也可以透过javascript来显示WebP影像。又Pale Moon 26+浏览器仅支持静态的WebP图像。Firefox浏览器亦在65.0版本支持WebP图像。
 网页浏览器GNOME Web和KDE图片浏览器Gwenview也支持WebP。
 图像软件当中，Picasa（从3.9版本起）、PhotoLine、Pixelmator、ImageMagick、XnView、IrfanView、GDAL、Aseprite和GIMP（2.10起）皆原生支持WebP格式。
 苹果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日发布的iOS 10和macOS Sierra GM种子版本中却移除了WebP的支持。
 
 
解决方法：
 把后台返回的数据。有关于webp的删掉。
 
 
 这四张图片路径对应着同一张照片，但是因为后缀有webp，红色框的链接我用手机打开是看不到的。
 所以~~删掉就行！

今天做手机项目中，一个轮播图片，在其他手机浏览器没问题，但是到了UC浏览器就有问题了，经过站长逐步排查，发现UC浏览器自带了广告过滤，
在UC浏览器设置里面将广告过滤关闭即可，但是这不是唯一解决方案。
后来我发现，uc手机浏览器会过滤包含ad字符的图片路径，禁止其显示，所以给图片命名或存放图片路径时 尽量不要含有ad字符。如ad_img
所以站长代码原来是这样的：

    

     1
    
    

     2
    
    

     3
    
    

     4
    
    

     5
    
    

     6
    
    

     7
    
    

     8
    
    

     9
    
    

     10
    
    

     11
    
    

     12
    
    

     13
    
    

     14
    
    

     15
    
    

     16
    
    

     17
    
    

     18
    

    

     

      <
      section 
      class
      =
      "ads" 
      style
      =
      "top: -860px;"
      >
     
     

          
      <
      div 
      class
      =
      "ad_1" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/ad1.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >
     
     

          
      <
      div 
      class
      =
      "ad_2" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/ad2.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >        
     
     

          
      <
      div 
      class
      =
      "ad_3" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/ad3.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >
     
     

          
      <
      div 
      class
      =
      "ad_4" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/ad4.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >
     
     

          
      <
      div 
      class
      =
      "ad_5" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/ad5.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >  
     
     

                
     
     

      </
      section
      >
     
    
后来修改这样就显示了：

    

     1
    
    

     2
    
    

     3
    
    

     4
    
    

     5
    
    

     6
    
    

     7
    
    

     8
    
    

     9
    
    

     10
    
    

     11
    
    

     12
    
    

     13
    
    

     14
    
    

     15
    
    

     16
    
    

     17
    
    

     18
    

    

     

      <
      section 
      class
      =
      "ads" 
      style
      =
      "top: -860px;"
      >
     
     

          
      <
      div 
      class
      =
      "img_1" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/img1.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >
     
     

          
      <
      div 
      class
      =
      "img_1" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/img2.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >        
     
     

          
      <
      div 
      class
      =
      "img_1" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/img3.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >
     
     

          
      <
      div 
      class
      =
      "img_1" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/img4.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >
     
     

          
      <
      div 
      class
      =
      "img_1" 
      style
      =
      "height: 430px; background-size: 320px 430px;"
      >
     
     

          
      <
      img 
      src
      =
      "/Public/mobile/images/member_login/img5.jpg" 
      style
      =
      "width: 320px; height: 430px;"
      >
     
     

          
      </
      div
      >  
     
     

                
     
     

      </
      section
      >