在Elm中,我有一个简单的图像,我希望将其替换为一些“缺少”的onerror图像。因此,我添加了一个“onerror”属性:
img
[ src "broken-link.png"
, attribute "onerror" "this.onerror=null;this.src='missing.png';"
] []
但是,当我查看生成的html时,img并没有获得
onerror
属性,而是获得了data-onerror
,当然这是行不通的。为什么是这样?以及我该如何解决?
这是我和 friend Bulbasaur一起制作的一个小例子,用以说明问题:https://ellie-app.com/3Yn8Y6Rmvrqa1
最佳答案
为什么是这样?
这似乎是Elm内置的未记录安全功能。
检查Elm的源代码,Html.attribute
定义为(source)
attribute : String -> String -> Attribute msg
attribute =
VirtualDom.attribute
并将
VirtualDom.attribute
定义为(source):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
,该代码在JavaScript中定义为(source):function _VirtualDom_noOnOrFormAction(key)
{
return /^(on|formAction$)/i.test(key) ? 'data-' + key : key;
}
因此,如果属性名称以
on
开头或为字符串formAction
,则将其重命名为数据属性。我如何解决它?
我知道如何解决此问题的一种方法是在没有JavaScript的情况下用Elm编写代码。这是full working example,其主要部分复制如下:(这是基于关于检测图像加载失败的公认答案here的。)
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
中的URLupdate : Msg -> Model -> Model
update msg model =
case msg of
ImageError ->
{ model
| src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
}
关于Elm:属性 "onerror"改为添加 "data-onerror"属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53456798/