Javascript Vue.js v-用于在Safari浏览器上错误加载图像

iOS 13 Safari和Chrome出现了一个奇怪的问题，Vue v-for将一个组件的图像随机渲染到另一个组件，但这只在导航到另一个视图然后返回时发生。在初始页面加载时，所有内容都显示得很好

图像通过使用v-for呈现组件来显示，图像通过

从内部URL动态加载

这是初始页面加载时的状态：

在导航到某处并返回后：

导航到某处并返回后的“聊天”代码：

如图2所示，有些是空的（如图3所示来自DOM的代码），有些则具有不正确的图像。“NBA”的图像来自另一个组件，在图像上不可见的另一个v-for（聊天和菜单侧的一部分）中呈现相同的代码。每次出现这种情况时，图像的顺序都不一样。

值得注意的是，Safari还为丢失的图像发送了两个相同的请求，“网络”选项卡显示第二个请求没有完成时间，尽管它们实际上都已完成

此版本仅可在iOS 13上复制。在使用Safari和Chrome的MacOS上没有发现同样的问题。在Android和Windows上运行良好。奇怪的是，它并不是100%都会发生

我还发现了另一个类似的问题（），说明这个bug已经在Webkit中修复，但对我来说仍然可以重现。 我还发现有人建议改为使用css背景，但我使用的是动态加载的svg图像

---

有人能解释一下为什么会发生这种情况，并提供一些解决方法吗？

你介意发布一个代码示例来重现这个问题吗？我不确定是否允许我将链接发布到我公司的测试站点，这个问题发生在哪里。。。然而，我试图创建一个fiddle，但是由于JSFIDLE似乎不允许重定向，所以这也没有帮助。。。这就是我在代码中的大致情况：因此，在您的示例中，我没有看到一些可能是潜在原因的东西-您没有为v-for循环中的项目分配键。如果生产代码中出现这种情况，那么Vue可能是在重用这些项，而不是重新呈现它们。相关医生：哦，我的错。每个小部件实际上都被分配了一个唯一的键。我根据真实代码更新了小提琴：