elm - 强制重绘 img 元素

Question

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

但是虚拟 DOM 根本没有改变，因为 img 节点具有相同的 src URL。有没有办法可以强制重新创建 img ？

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

Answer 1

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