How can I detect failure to load an image in Elm

Ido Ran

How can I detect that an image was failed to be load in Elm?

I use img [ src "/path/to/image" ] and would like to know if the image failed to load. In plan old JavaScript I would register to onError event of img but I don't see onError in Elm.

Chad Gilbert

You can use Html.Events.on to capture an image load error.

You will need a Msg value to indicate that the image failed. Here I'll call that ImageError:

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

The use of Json.Decode.succeed may look confusing in this context (after all, you're trying to capture an error, so what is succeed doing there?), but that's just part of the JSON decoding package. It basically means to ignore the error javascript value passed as the first parameter by the DOM event and use the ImageError Msg.

Here is an example of capturing the error event.

And here is another example which captures both the error and load events. You can change the image src to a good or bad URL to see what happens in either case.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I detect a connection failure in gorm?

In Elm, how can I detect if focus will be lost from a group of elements?

In Elm, how can I detect the mouse position relatively to an html element?

How can I detect and respond to success and failure from a component in Flux?

How can I detect the defect in this image of a semiconductor?

How can I detect patch at strip image?

How can I detect text area in an image?

Elm - How Do I Detect Current Focus

How can I load an image on Python Pillow?

Android Picasso how can I load image

How can I load an image into tkinter?

How can I detect only vertical lines in an image?

How can I detect when an image was loaded (or failed) without jQuery?

How can I train a model to detect a specific symbol within an image?

How to detect browser in Elm

How can I rotate an image I load with filedialog.askopenfilename?

How can I read a local file in Elm?

In Elm, how can I iterate over a map?

How can I compare random number in elm

Detect image failure within iFrame

How can I load image(s) used in sass stylesheet in webpack?

How can I dynamically load a image in the body tag in each component?

How can I load an image from a Drupal field to UIImageView?

How can I load a jpeg image from a buffer?

How can I load an image url that's in an array variable with php?

How can I make a page hero image move on page load?

How can i load a image in Python, but keep it compressed?

How can I properly load an image with Express's static middleware?

How can i load the url image from CSV