elm - 强制重绘 img 元素

Question

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

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

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

Answer 1

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