小程序本地图片在编辑器上能显示，在手机上不显示？

写在前面：

进行小程序开发的时候，突然发现一个如此诡异的问题：小程序本地图片在编辑器上能显示，在手机上不显示？带着这个问题可能和大家解决问的步骤一样，先惊讶一番、然后去网上找各种帖子，发现绝大部分帖子压根没有说到正点上，纯属一顿乱猜，没有去根据现象思考为什么不能在手机上显示，有的还相互抄袭、、、我实在看不下去了，所以就写了今天这篇帖子！文中我大致来分析了一下原因是什么？纯属个人见解，如有不对之处，欢迎各位大佬来喷！

---

检查图片的名称是否有中文名称，这里强调一下，无论用什么语言开发程序，最好都不要用中文命名，因为有中文的时候可能因为系统的编码设置导致中文编码异常出现诡异问题，排查起来会比较困难！！！

---

现象描述：

再说一遍现象：小程序本地静态图片在编辑器上能显示，在手机上不显示？（注意：本文讲的核心是本地图片）

---

问题分析：

造成这种问题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.引用图片时向上返回层深小于当前文件所在层深，图片在手机和编辑器中都不显示；

---