問題
辛苦ㄌ一個月
終於把專案上架
https://tomb.littlesheng.com/
上線後拿手邊設備來測試
win10/mac/ipad/iphone/android...都測了一輪
發現問題： ipad/iphone 在訪問網站時
有部分圖片不會正確顯示
除非
1.縮小瀏覽器app再打開
2.用網頁檢視器更改任意 css 屬性

用了 safari/brave/chrome 都有這個問題
看起來不是 safari 的鍋

因為是第一次學前端框架
第一次用 vue
猜想沒意外的話，問題就出在 vue and ios 之間
所以用關鍵字"vue render image blank "之類的去估狗
結果沒看到相同症狀的QQ

後來試了一下
發現只要是 img :src的圖片
就會出現這個問題
例如

雖然實際上在網頁檢視器能看到

但他就是不會顯示
很奇妙

解法
加上 v-bind:key
變成

就正常了

找到這個解法的時候
已經過去一個多小時
美好的生命又這樣消逝惹
今天可以玩帕魯的時間又少一小時QQ
所以決定紀錄踩雷筆記
希望下一個遇到問題的人
可以省下這一小時

額外筆記
之前只知道 v-for 要配 v-bind:key
沒想到這次沒用 v-for 也得用到他
下方紀錄他的用途
看起來是加上 key 之後，可以更準確的更新 DOM 狀態

v-bind:key 的重要性

v-bind:key 在 Vue.js 中是用來給列表渲染或條件渲染中的每個元素提供一個獨一無二的標識。使用 v-bind:key 的主要目的和好處如下：

維護狀態：
當 Vue.js 用於渲染列表時，例如使用 v-for 指令，Vue 需要一個方式來跟蹤每個節點的身份，以便可以準確地重新渲染列表。如果沒有 key，Vue 會使用一種非常簡單的算法來更新列表，這可能會導致錯誤地復用或者渲染元素。

提高渲染效率：
當列表數據發生變化時，Vue 會根據新數據生成新的虛擬 DOM 樹，並和舊的虛擬 DOM 樹進行對比（diff），以確定哪些元素需要更新。如果列表元素有 key，Vue 可以更快地通過 key 找到對應的舊元素，然後進行高效的更新。如果沒有 key，Vue 只能逐個比較，這會降低更新效率，特別是列表較長時。

復用和重排元素：
在進行列表重排（比如排序）時，有 key 的情況下，Vue 可以正確地復用和重新排序現有元素。這意味著，它可以保持現有元素的狀態（比如輸入框中的文本）並且只移動 DOM 元素，而不是刪除後再重新創建。

簡而言之，v-bind:key 是幫助 Vue.js 更準確、更高效地更新虛擬 DOM 的重要方式。它為每個列表元素提供一個獨特的標識，使 Vue 可以跟蹤每個元素的狀態，減少不必要的 DOM 操作，從而提升應用的性能。