Blazor中img onerror事件无法更新视图模型属性，求排查解决

你在原生HTML的onerror属性中直接写入Blazor的C# lambda表达式是错误的。原生JS事件属性只能执行JavaScript代码，无法识别并调用Blazor的C#方法，导致SetImageFailedFlag从未被触发，标志位自然不会更新。

方案1：使用Blazor原生@onerror事件绑定 #

这是最简洁的方式，Blazor会自动处理C#方法与事件的关联：

<h1>Hello, world!</h1>

Welcome to your new app.

<img src="https://images.dog.ceo/breeds/dane-great/n02109047_8090" @onerror="SetImageFailedFlag">

<p>Image failed to load @ImageFailedFlag</p>

@code {
    private bool ImageFailedFlag { get; set; } = false;

    private void SetImageFailedFlag() {
        ImageFailedFlag = true;
        // Blazor在事件处理后会自动调用StateHasChanged，此处可省略
        // StateHasChanged();
    }
}

方案2：保留this.onerror=null逻辑（避免重复触发错误） #

如果需要像原生JS那样清除onerror事件防止重复触发，可以结合ElementReference和JS互操作实现：

<h1>Hello, world!</h1>

Welcome to your new app.

<img @ref="imageElement" src="https://images.dog.ceo/breeds/dane-great/n02109047_8090" @onerror="HandleImageError">

<p>Image failed to load @ImageFailedFlag</p>

@code {
    private bool ImageFailedFlag { get; set; } = false;
    private ElementReference imageElement;
    [Inject] private IJSRuntime JS { get; set; }

    private async Task HandleImageError() {
        // 通过JS清除当前图片的onerror事件
        await JS.InvokeVoidAsync("eval", $"{imageElement}.onerror = null;");
        ImageFailedFlag = true;
    }
}

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