Vue img :src 在 ios browser 的踩雷笔记

问题
辛苦ㄌ一个月
终于把专案上架
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 操作，从而提升应用的性能。