事故詳情
這周我做了一個顯示圖片的功能，出現一個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~