强制重绘 img 元素答案

【问题标题】：Force redraw of img element强制重绘 img 元素
【发布时间】：2018-04-24 18:14:00
【问题描述】：

我的 Elm 应用程序允许用户旋转图片：当点击屏幕上的图片时，elm 会调用 API 来旋转服务器上的图片文件。之后，我希望旋转后的图像显示在浏览器中。

但由于 img 节点具有相同的 src URL，因此虚拟 DOM 根本没有改变。有什么方法可以强制重新创建 img 吗？

当然，我可以使用 Keyed 节点或修改我的 img 上的某些属性来强制重绘，但这意味着向我的模型添加一些在旋转时修改的内容。这是可能的，但不是很优雅。

【问题讨论】：

我认为你基本上是正确的，所以问题变成了添加什么样的状态。也许最合适的是与 http 请求状态相关的东西，因为您可能还希望其他效果让用户知道正在发生的变化
似乎让原始版本和旋转版本共享相同的 URI 是一种很好的方式来让缓存在许多级别感到沮丧，而不仅仅是 DOM / 浏览器。我建议使用查询参数作为区分因素。

【解决方案1】：

您想要在旋转时修改某些内容：即图像。因此，当您希望发生旋转时，您将在模型中进行更改。我会让 API 的响应增加模型中的计数器（或通过 Time.now 使用当前时间），然后使用基于该值的缓存破坏查询参数更新图像 URL。有关缓存清除查询参数的更多详细信息，请参见此处：Cache busting via params

【讨论】：

谢谢大家。我就是这样做的。在查询字符串参数中带有时间戳。两者都会更改模型并“破坏”缓存。