Elm:属性"onerror“添加了"data-onerror”属性。

Question

在埃尔姆，我有一个简单的形象，我希望它被一些‘丢失’的图像在错误。因此，我添加了一个"onerror“属性：

img
    [ src "broken-link.png"
    , attribute "onerror" "this.onerror=null;this.src='missing.png';"
    ] []

但是，当我查看生成的html时，img没有得到一个onerror属性，而是得到了一个data-onerror，当然这是行不通的。

为什么会这样呢？我该怎么解决呢？

下面是我和我的朋友Bulbasaur做的一个小例子来说明这个问题：https://ellie-app.com/3Yn8Y6Rmvrqa1

Answer 1

为什么会这样呢？

这似乎是榆树的一个内置的无文件安全特性。

检查Elm的源代码，Html.attribute被定义为(来源)

attribute : String -> String -> Attribute msg
attribute =
    VirtualDom.attribute

VirtualDom.attribute被定义为(来源)：

attribute : String -> String -> Attribute msg
attribute key value =
    Elm.Kernel.VirtualDom.attribute
        (Elm.Kernel.VirtualDom.noOnOrFormAction key)
        (Elm.Kernel.VirtualDom.noJavaScriptOrHtmlUri value)

属性名onclick传递给Elm.Kernel.VirtualDom.noOnOrFormAction，Elm.Kernel.VirtualDom.noOnOrFormAction在JavaScript as (来源)中定义：

function _VirtualDom_noOnOrFormAction(key)
{
    return /^(on|formAction$)/i.test(key) ? 'data-' + key : key;
}

因此，如果属性名以on开头，或者是字符串formAction，则将其重命名为数据属性。

我该怎么解决呢？

我知道如何解决这个问题的一种方法是在没有JavaScript的情况下用Elm编写代码。下面是全工作实例的主要部分：(这是基于关于检测图像负载故障的公认答案这里的。)

1)将当前URL保存在模型中

type alias Model =
    { src : String
    }

init : Model
init =
    { src = "http://example.com" }

2)更改事件处理程序，以便在图像加载错误时发送Elm消息。

img
    [ src model.src
    , on "error" (Json.Decode.succeed ImageError)
    , alt "Should be Bulbasaur"
    ] []

3)错误时更改update中的URL

update : Msg -> Model -> Model
update msg model =
    case msg of
        ImageError ->
            { model
                | src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
            }

Answer 2

我会通过为图像加载错误事件编写一个自定义事件处理程序来解决这个问题。自定义处理程序将类似于：

onImageLoadError : msg -> Html.Attribute msg
onImageLoadError message =
    on "error" (JD.succeed message)

我将将Model，Msg定义如下：

type Msg
    = ImageLoadError


type alias Model =
    ImageSrc

我还将定义一个自定义类型来包装good和default。

type ImageSrc
    = Good String
    | Default String

onImageLoadError将被触发并将ImageLoadError msg发送到update函数，然后update函数将默认的url设置为：

update : Msg -> Model -> Model
update msg model =
    case msg of
        ImageLoadError ->
            Default "https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"

下面是完整的运行代码：

module Main exposing (main)

import Browser
import Html exposing (Html, div, img, text)
import Html.Attributes exposing (alt, src)
import Html.Events exposing (on)
import Json.Decode as JD


type Msg
    = ImageLoadError


type ImageSrc
    = Good String
    | Default String


type alias Model =
    ImageSrc


update : Msg -> Model -> Model
update msg model =
    case msg of
        ImageLoadError ->
            Default "https://developer.mozilla.org/static/img/web-docs-sprite.22a6a085cf14.svg"


imageSrcVal : ImageSrc -> String
imageSrcVal src =
    case src of
        Good url ->
            url

        Default url ->
            url


view : Model -> Html Msg
view model =
    div []
        [ div [] [ text "Broken image, that should be replaced by Bulbasaur: " ]
        , img
            [ src (imageSrcVal model)
            , alt "Should be Bulbasaur"
            , onImageLoadError ImageLoadError
            ]
            []
        , div [] [ text "instead it does nothing, and the 'onerror' attribute is 'data-onerror' (use inspect element to see)" ]
        ]


onImageLoadError : msg -> Html.Attribute msg
onImageLoadError message =
    on "error" (JD.succeed message)


main : Program () Model Msg
main =
    Browser.sandbox
        { init = Good "https://developer.mozilla.org/static/arrows/arrow-right.cbc8b4f075cc.svg"
        , view = view
        , update = update
        }

Ellie应用程序。

我init的模型有一个好的url "https://developer.mozilla.org/static/arrows/arrow-right.cbc8b4f075cc.svg"，但是如果你把它变成像"https://bad.developer.mozilla.org/static/arrows/arrow-right.cbc8b4f075cc.svg“这样的坏url，你就会看到默认的图像。