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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/li11_/article/details/81477888

写在前面:

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


现象描述:

再说一遍现象:小程序本地静态图片在编辑器上能显示,在手机上不显示?(注意:本文讲的核心是本地图片


问题分析:

造成这种问题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)。可直接扫码关注,公众号会不定期更新新文章,分享踩坑笔记!期待您的关注!
这里写图片描述

展开阅读全文

没有更多推荐了,返回首页