elm - 如何检测 Elm 中加载图像失败的情况

Question

如何检测 Elm 中图像加载失败？

我使用 img [ src "/path/to/image"] 并且想知道图像是否加载失败。在旧的 JavaScript 计划中，我会注册到 img 的 onError 事件，但我在 Elm 中看不到 onError 。

Answer 1

您可以使用Html.Events.on捕获图像加载错误。

您将需要一个 Msg 值来指示镜像失败。在这里，我将其称为 ImageError:

img [ src "/path/to/image", on "error" (Json.Decode.succeed ImageError) ] []

在此上下文中，Json.Decode.succeed 的使用可能看起来令人困惑(毕竟，您正在 try catch 错误，那么 succeed 在那里做什么？)，但这只是 JSON 解码包的一部分。它基本上意味着忽略 DOM 事件作为第一个参数传递的错误 javascript 值并使用 ImageError Msg。

Here is an example of capturing the error event .

And here is another example which captures both the error and load events 。您可以将图像 src 更改为好或坏的 URL，看看在这两种情况下会发生什么。