CODEWITHSUNDEEP
htmlelm
T.J. Webaholic
T.J. Webaholic

Reputation: 51

How to make image render Elm?

How do I make an image render within Elm view?

Here is my code:

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)
        ]

I'm getting the error code

I cannot find an "img" variable: and I cannot find a "src" variable:.

How do I make the image display? What am I doing wrong?

Here are my imports:

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

Upvotes: 0

Views: 645

Answers (1)

Robin Zigmond
Robin Zigmond

Reputation: 18249

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

It seems you already know how to import the functions representing individual html elements, so to solve the issue with img simply add it to the list of exposed imports from Html. As for src, like all functions representing HTML attributes, this comes from Html.Attributes.

So simply change the above to:

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

Upvotes: 4

Related Questions