如何检测在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在那里做什么？），但是那个＆＃39;只是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，以查看在任何一种情况下会发生什么。