时间戳

首页 > 解决方案 > 如何使图像渲染 Elm？

html - 如何使图像渲染 Elm？

问题描述

如何在 Elm 视图中进行图像渲染？

这是我的代码：

view : Model -> Html Msg
view model =
    div []
        [ img [src "https://cameras.liveviewtech.com/img/LVLogo_small.png"] []
        , input [ onInput ChangeUserInput ] []
        , button [ onClick ClearText ] [ text "Clear" ]
        , button [ onClick SaveText ] [ text "Save" ]
        , div [] (List.map rowItem model.textToDisplay)
        ]

我收到错误代码

我找不到“img”变量：也找不到“src”变量：。

如何使图像显示？我究竟做错了什么？

这是我的进口：

module Main exposing (main)    
import Browser
import Html exposing (Html, button, div, h1, input, text)
import Html.Events exposing (onClick, onInput)

标签： htmlelm

解决方案

import Browser
import Html exposing (Html, button, div, h1, input, text)
import Html.Events exposing (onClick, onInput)

似乎您已经知道如何导入表示单个 html 元素的函数，因此img只需将其添加到从Html. 至于src，就像所有代表 HTML 属性的函数一样，这来自Html.Attributes.

所以只需将上面的内容更改为：

import Browser
import Html exposing (Html, button, div, h1, img, input, text)
import Html.Events exposing (onClick, onInput)
import Html.Attributes exposing (src)

推荐阅读