Elm img属性参数太多

Question

我对榆树非常陌生，我遇到了一个让我沮丧不已的问题。下面是我的代码：

view : Model -> Html Msg
view model =
    img [src "Img1.png", width 300, height 300] []
    div []
        [ input [ onInput ChangeUserInput ] []
        , button [ onClick SaveText ] [ text "Save" ]
        , button [ onClick Clear ] [ text "Clear" ]
        , h1 [] [text model.userInput]
        ]

我收到的错误是

The `img` function expects 2 arguments, but it got 5 instead

我认为它将div标记参数解析为img参数，但我不知道如何修复它。

Answer 1

视图函数需要返回单个HTML元素。目前，您似乎正在尝试返回两个元素：img和div。div及其两个参数被选为img的参数，因为您的代码中没有Elm可以用来标识要传递给img函数的参数列表的末尾。

您需要将它们都包装在一个包含它们的元素中，例如，另一个div

view : Model -> Html Msg
view model =
    div []
        [ img [ src "Img1.png", width 300, height 300 ] []
        , div []
            [ input [ onInput ChangeUserInput ] []
            , button [ onClick SaveText ] [ text "Save" ]
            , button [ onClick Clear ] [ text "Clear" ]
            , h1 [] [ text model.userInput ]
            ]
        ]