如何检测在Elm中加载映像失败

Question

如何检测映像是否无法加载到Elm中？

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

Answer 1

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

您将需要一个Msg值来指示图像失败。在这里，我会打电话给那个ImageError：

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

采用Json.Decode.succeed可能看起来令人困惑在这方面（毕竟，你想捕捉到一个错误，那么什么是succeed做什么呢？），但这只是JSON解码包的一部分。它基本上意味着忽略由DOM事件作为第一个参数传递的错误javascript值，并使用ImageErrorMsg。

Here is an example of capturing the error event。

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