事故详情这周做了一个展示图片的功能，出现了一个bug，图片偶尔无法展示，只剩下一个白框。天真忙，以为是网络或浏览器内存不足（页面嵌入app，那段时间app很抽搐），就让他去了，反正大部分时间都是正常的时间。后来有时间，迫不得已（心里很不情愿，不是自己的原因）优化了这个问题，结果bangbang！打脸。分析：我以为是vue的问题（没错，我用的是vue）双向绑定失败，发现img标签的src有值。事实证明vue非常强大。为什么src不能显示值？会不会是浏览器的错？疯了，我什至怀疑浏览器。然而，浏览器的技术非常成熟和伟大。我必须坚信，所有的bug都只能是我的问题。想了想，我觉得这个问题很有问题。解决问题的关键是知道它为什么会发生。于是，我反复触发这个行为，脑子飞速运转（夸张），终于——————————（柯南背景音乐：当当~当当！当当！当当~当当！当当！）不显示关键不是网络不好加载慢，相反是网络太快的原因。因为我的页面有两个子页面，显示图片的子页面一开始是隐藏的。而且图片需要放大缩小，所以图片被很多div包裹起来。有一个相对定位的容器div，高度设置为父div的100%。但是当时页面没有显示，父div没有高度，所以容器div的高度为0————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————图片显示不出来。震惊！因为我用vue给父组件写了固定高度，子页面显示的时候父组件也有高度，为什么容器div不能继承这个呢？这不可能是原因。因为vue用display:none控制v-show不可见的组件，浏览器使用reflow渲染display:none后显示的组件，reflow会计算所有节点的几何尺寸和位置（【浏览器渲染原理与过程】]),所以不可能子组件不能继承父组件的高度。因此，我将目光投向了放大和缩小插件PinchZoom.JS。哼，果然是他！插件的代码很容易看，很快就定位到了问题所在。本插件在初始化时设置了容器的高度，这个高度就是父组件的高度。Atthistime,theparentcomponentdoesnothaveaheight(⊙﹏⊙)BEMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM(tooshameful,IwillnottellothersthereasonforthisbugYes,Iwillonlysecretlywriteinthearticle...)总结如果你也遇到偶尔加载不出来图片的问题看到我的废话，深表歉意和不理解。但是我想说，所有的bug都是你的问题（重要），不要太相信自己，解决问题的关键是找到问题出现的原因（重要）最后，谢谢你的耐心等待。结束~
