如何使用 elm-ui 在 elm 中显示圆形图像？

Question

我正在玩elm-ui，我正在努力实现（在我看来）简单的任务，但我正在努力。
我想显示一个圆形图像，就像我们在 iOS 或其他几个平台上的联系表单中都知道的那样。

据我所知，有两个库叫做elm-ui：
- mdgriffith/elm-ui
- gdotdesign/elm-ui
我正在使用第一个。

我正在玩，Element.Border但只是在背景中添加了一个边框。

import Element exposing (image)
import Element.Border as Border

image
  [ Border.rounded 50
  , Border.width 5
  ]
  { src = "img.png"
  , description = "Some text..."
  }

我还尝试使用 asvg来显示一个圆圈并用图像作为背景填充它。但是现在我很难将背景设置为颜色以外的任何东西。

import Element exposing (html)
import Svg exposing (svg)
import Svg.Attributes exposing (cx, cy, fill, height, r, width)

html
  (svg
      [ width "100"
      , height "100"
      ]
      [ circle
          [ cx "50"
          , cy "50"
          , r "50"
          , fill "orange" -- That´s where I would like to insert my image.
          ]
          []
      ]
  )

我来自 .Net 世界，在那里使用 WPF 的 XAML，我将使用 svg 作为图像上的不透明蒙版。

我怎样才能在 ELM 中实现这一目标？
感谢您的帮助！

Answer 1

我在Elm Discourse上得到了这个问题的答案。

这很简单，通过添加一个Border.rounded和clip。

image
    [ centerX
    , centerY
    , Border.rounded 50 
    , clip
    ]
    { src = "https://cdn.cnn.com/cnnnext/dam/assets/191024091949-02-foster-cat-large-169.jpg"
    , description = "A Cat"
    }

怎么回答的家伙还提供了一个艾莉示例。