摘要：事故详情这周我做了一个显示图片的功能，出现一个，偶尔图片无法显示，只剩一个白框框。总结如果你也遇到图片偶尔加载不出来的问题而看到我这满篇的废话，我对此深感抱歉和误解。
事故详情
这周我做了一个显示图片的功能，出现一个bug，偶尔图片无法显示，只剩一个白框框。天真且忙碌的我以为是网络或者浏览器内存不够的原因（页面嵌入app里面，那段时间app很抽风），就随他去了，反正大多数时间都是正常的。后面有时间了，我被迫（内心觉得不是自己的原因很不情愿）去优化这个问题，结果啪啪！打脸。
分析：
我以为是vue（对，我用的就是vue）双向绑定失效的问题，结果发现img标签的src是有值的。事实证明vue是很强大的。
src有值为什么不能显示呢？难道是浏览器的锅？疯魔的我都怀疑到浏览器上了。但是，浏览器的技术很成熟伟大，我要坚信，所有的bug都只可能是我的问题。
思前想后，我觉得偶现这个问题很是问题。解决问题的关键在于知道为什么会产生问题。
于是，我重复触发这个行为，大脑飞速运转（夸张），终于——————------
(柯南背景音乐：当当~当！当！当当~当！当！)
触发图片不显示的关键不是网络不好加载慢的原因，恰恰相反，是网络太快的原因。因为我的页面是有两个子页的，而展示图片的那个子页最开始是隐藏的。且图片需要放大缩小，所以图片是由很多div包裹的。有个容器div是相对定位，高度设为父div的100%，然而当时页面没有显示，父div没有高度，所以这个容器div高度为0—————————————图片显示不出。
震惊！
因为我对父组件是用vue写成固定高度的，而子页面显示时父组件也是有高度的，为什么容器div无法继承这个？
不可能是这个原因。因为，vue对v-show不可见的组件是用display:none控制的，浏览器对display:none后显示的组件采用reflow的方式渲染，reflow会计算所有的结点几何尺寸和位置([浏览器渲染原理及流程]),所以不可能子组件无法继承父组件的高度。
所以，我把目光投向了我那个放大缩小的插件PinchZoom.JS。
哼，果然是他！这个插件的代码很好查看，所以我迅速地定位了问题。这个插件在初始化时会设定容器的高度，而这个高度取得是父组件的高度，而这个时候父组件没有高度(⊙﹏⊙)b
emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
(太丢人了，我是不会告诉别人这个bug的原因的，我只会偷偷写在文章里。。。)
总结
如果你也遇到图片偶尔加载不出来的问题而看到我这满篇的废话，我对此深感抱歉和误解。但我想说，所有bug都是你的问题（重要），不要太相信自己，解决问题的关键是找到为什么会产生问题（重要）
最后，感谢您的耐心。over~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53422.html
摘要：事故详情这周我做了一个显示图片的功能，出现一个，偶尔图片无法显示，只剩一个白框框。总结如果你也遇到图片偶尔加载不出来的问题而看到我这满篇的废话，我对此深感抱歉和误解。 事故详情这周我做了一个显示图片的功能，出现一个bug，偶尔图片无法显示，只剩一个白框框。天真且忙碌的我以为是网络或者浏览器内存不够的原因（页面嵌入app里面，那段时间app很抽风），就随他去了，反正大多数时间都是正常的。...
摘要：若拦截事件返回为，表示拦截，事件不会向下层的或者传递，表示不拦截，继续分发事件。五注册反注册未成对使用引起的内存泄漏。七集合对象没有及时清理引起的内存泄漏。 原文链接：https://blog.csdn.net/wen_hah... 版权声明：本文为博主原创文章，转载请附上博文链接！ 前言 金三银四到来了，找工作的好时候到了，小伙伴们是不是都在忙着找工作呢，小弟前一阵也是忙着在找工作，...
摘要：发现分析资源文件的过程中，发现了一个数据库。激活码明码保存。激活码的发布和验证分开激活码的发布由项目负责将激活码明文交由发布渠道，如印刷或其他销售渠道。这样即使激活码数据库被泄露也不怕其用来被激活。 本文隐去了公司名、人名、应用名、以及应用特征等敏感信息。 本文作者@CuGBabyBeaR 0、背景和事先分析 前段时间看见一个能够和现实进行交互的应用，觉得挺有意思，恰巧有一个下午...
摘要：美国金融行业监管局有的重要应用目前正运行于亚马逊云端服务上面，其中包括市场监测应用，每年因此节省万美元的费用。穆林斯负责与金融企业达成新的云服务协议。 配图：安全性不再是云服务客户最担心的事情北京时间3月19日消息，路透社今天撰文指出，对于美国金融公司而言，使用共享云服务的益处是显而易见的。市场研究公司IDC预计，得益于云服务，到2019年全球较大几家银行将节省150亿美元的庞大资金，技术基...
摘要：在这里我们可以从一个科技工作者口中了解到一个这样的事实互联网与人工智能在当今世界科技格局中，中国和美国是两国独大。同样，人工智能的发展离不开数据标注，数据标注在人工智能的高速路上，作为基石，成为了众多重要环节之中的重中之重。 中国科学技术大学博士袁岚峰在不久前的文章中把中国科技在世界的地位大致分为五类。 我们本文中只引用第四类 如今世界科技的第四个格局：双头格局，一般是中美两国远远高于...
阅读 1608·2021-11-23 09:51
阅读 1180·2019-08-30 13:57
阅读 2259·2019-08-29 13:12
阅读 2013·2019-08-26 13:57
阅读 1195·2019-08-26 11:32
阅读 978·2019-08-23 15:08
阅读 702·2019-08-23 14:42
阅读 3082·2019-08-23 11:41
