Images aren't rendering when Blazor variable bound to style in <image> tag

Issue

I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.

Replication:

dotnet new blazorwasm

I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".

In index.razor I've updated the code as follows:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="@Size" height="@Size">
<image src="Media/search.svg" alt="Bootstrap" width="@Size" height="@Size"/>

@code
{
    private static string Size => "75";
}

The result of running the above code shows only one image displaying

Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.

<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>

then the code works again as expected.

I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?

Update

The generated HTML using the template is

<!--!--><div class="top-row px-4" b-vv8m6rf2se=""><a href="https://docs.microsoft.com/aspnet/" target="_blank" b-vv8m6rf2se="">About</a></div>

        <article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->

<!--!--><h1 tabindex="-1">Hello, world!</h1>

Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>

Solution

An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.

Now for a speculative answer:

Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,

The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage

This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.

But after Blazor has filled in the @Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.

Answered By - Henk Holterman