Bulma.image generates without its child "img" tag.

[LuisFX]

In the Bulma docs, an image is defined as:

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

Feliz.Bulma.image code:

Bulma.image [
    image.is96x96
    image.isRounded
    prop.src "https://bulma.io/images/placeholders/128x128.png"
]

... generates the following:

<figure class="image is-96x96 is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>

Which makes doesn't render on the DOM.

Wrapping an Html.img with Bulma.image does work:

Bulma.image [
    Html.img [
        image.is96x96
        image.isRounded
        prop.src "https://bulma.io/images/placeholders/128x128.png"
        prop.alt "Image"

    ]
]

Is this expected behaviour?

[MangelMaxime]

The problem is a mismatch between what Bulma expects and what Feliz.Bulma offers.

If you we go to the source of truth (Bulma documentation), the expected HTML is:

<figure class="image is-128x128">
  <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>

So Bulma, expects 2 HTML elements.

The corresponding F# code should be:

Bulma.image [
    image.is96x96
    prop.children [
        Html.img [
            prop.className "is-rounded"
            prop.src "https://bulma.io/images/placeholders/128x128.png"
        ]
    ]
]

The confusion in Feliz.Bulma is caused by image.isRounded when it should be img.isRounded.

This means that we should provides Bulma.img too, to keep following the same convention as everywhere else and the code would become:

Bulma.image [
    image.is96x96
    prop.children [
        Bulma.img [
            img.isRounded
            prop.src "https://bulma.io/images/placeholders/128x128.png"
        ]
    ]
]

[LuisFX]

Yikes, I didn't mark this as done "closed". My bad. Your answer definitely helped and we've been using it properly now. Thanks!