Elm视图中图片显示报错求助：如何实现指定参数的图片渲染

嘿，我来帮你搞定这个Elm图片显示的问题！你的代码里有几个明显的语法错误，咱们一步步修正：

先拆解你代码的问题 #

你的代码把img元素的属性和元素本身混在了一个列表里，这完全不符合Elm的Html构造规则。Elm里的img函数是这样的：img : List Attribute msg -> List (Html msg) -> Html msg——第一个参数是属性列表，第二个是子元素列表（图片本身没有子元素，所以传空列表[]就行）。

另外，width和height是图片的属性，必须放在第一个参数的列表里，不能单独拎出来。

正确的代码实现 #

要在posx 0、posy 0的位置显示宽300、高300的图片，我们需要用style属性来控制定位，完整代码如下：

view : Model -> Html Msg
view model =
    img
        [ src "./Img1.png"
        , width 300
        , height 300
        , style "position" "absolute"
        , style "left" "0px"
        , style "top" "0px"
        ]
        []

代码细节解释 #

• src "./Img1.png"：指定图片的相对路径，确保图片文件放在项目能访问到的位置（比如和Elm源码同目录，或者项目的静态资源目录）
• width 300、height 300：直接设置图片的宽高（默认单位是像素）
• style "position" "absolute"：开启绝对定位，这样才能用left和top精准控制位置
• style "left" "0px"、style "top" "0px"：把图片定位到父容器的左上角（对应posx 0、posy 0）

如果你的父容器设置了相对定位，这个绝对定位会相对于父容器生效；如果父容器没有定位属性，就会相对于整个浏览器视口定位。

内容的提问来源于stack exchange，提问作者Charles Zhang