Custom onLoad event handler does not work for images

[eniac314]

I can't find a way to catch a loading event from an image rendered with elm-ui. Here is an ellie displaying two images, one with elm-ui and the other with the Html library. The custom handler only works for the second picture.

https://ellie-app.com/3fQjtP4GsPqa1

Expected behavior it should work for both pictures.

• OS: Ubuntu 16.04
• Browser: Firefox 61.0.1
• elm 0.19
• elm-ui 1.0.0

[SidneyNemzer]

Looks like the event listener for the first image is getting added to the wrapper div, instead of the image element

[thetechnaddict]

I'm experiencing the same issue - elm-ui 1.1.0

[harrysarson]

This is my work around:

image :
    List (E.Attribute msg)
    ->
        { src : String
        , description : String
        , onLoad : Maybe (Json.Decode.Decoder msg)
        }
    -> Element msg
image attrs { src, description, onLoad } =
    E.el
        (E.htmlAttribute (Html.Attributes.class "ic")
            :: attrs
        )
        (E.html
            (Html.img
                (List.concat
                    [ [ Html.Attributes.src src
                      , Html.Attributes.alt description
                      , Html.Attributes.style "width" "100%"
                      , Html.Attributes.style "height" "100%"
                      ]
                    , case onLoad of
                        Just ol ->
                            [ Html.Events.on "load" ol ]

                        Nothing ->
                            []
                    ]
                )
                []
            )
        )

It is not exactly equivalent to Element.image as elm-ui does not expose all it's internals. Specifically, the width and height of the image have been hacked into something that seems to work for me. It also relys on elm-ui not changing the css classes it uses.

[NduatiK]

also relys on elm-ui not changing the css classes it uses.

We can replace (Html.Attributes.class "ic") with (Html.Attributes.style "display" "block"). The ic class seems to only apply this one property.