Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.32k stars 535 forks source link

[Bug]: ImageCropper doesn't like Source change #5809

Closed tesar-tech closed 1 month ago

tesar-tech commented 1 month ago

Blazorise Version

1.6.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

@using Blazorise.Cropper
@rendermode @(new InteractiveServerRenderMode(false))

<Row>

<Column>

    <FieldBody>
        <Cropper  Source="@ImageSource"  Style="aspect-ratio: 16 / 9; height: 100%;"/>
    </FieldBody>
</Column>
<Column>
    <Div Margin="Margin.Is2.FromBottom">

        <Button Color="Color.Secondary" Clicked="@ChangeSource" >Change source</Button>
    </Div>

</Column>
</Row>

@code {

    public string ImageSource { get; set; } = base64img2;

    const string base64img1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
    const string base64img2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpVIqImYQ6ZChOtlFRRxLFYtgobQVWnUwufQLmrQkKS6OgmvBwY/FqoOLs64OroIg+AHi7OCk6CIl/i8ptIjx4Lgf7+497t4BQqvKNLMvBmi6ZaQTcSmXX5UCrwgiDBF+DMvMrCczi1l4jq97+Ph6F+VZ3uf+HINqwWSATyKOsbphEW8Qz25adc77xCIryyrxOfGkQRckfuS64vIb55LDAs8UjWx6nlgklko9rPQwKxsa8QxxRNV0yhdyLquctzhr1Qbr3JO/MFTQVzJcpxlGAktIIgUJChqooAoLUVp1UkykaT/u4R9z/ClyKeSqgJFjATVokB0/+B/87tYsTk+5SaE40P9i2x/jQGAXaDdt+/vYttsngP8ZuNK7/loLmPskvdnVIkfA0DZwcd3VlD3gcgcYfarLhuxIfppCsQi8n9E35YGRWyC45vbW2cfpA5ClrpZvgINDYKJE2ese7x7o7e3fM53+fgCBIHKsdO2deAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gKHBQHADLSXqIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAPklEQVRYw+3OMQEAMAgAIF0bQxjZjkvg7wEJyOqJe16cpKWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpbX5jfUBd4d8OGUAAAAASUVORK5CYII=";

    private void ChangeSource(MouseEventArgs obj)
    {
        ImageSource = base64img1;
    }
}

Steps to reproduce

Run the code above.

What is expected?

Source to be changed and new image to be displayed

What is actually happening?

Crashing with

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
      System.NullReferenceException: Object reference not set to an instance of an object.
         at Blazorise.Cropper.Cropper.<>c__DisplayClass1_0.<<SetParametersAsync>b__0>d.MoveNext()
      --- End of stack trace from previous location ---
         at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
         at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
         at Blazorise.Cropper.Cropper.OnAfterRenderAsync(Boolean firstRender)

(Blazor Server)

There are base64 images for simple reproducibility, but it works the same with img/gallery/6.jpg or any other image.

The same error is when the source is empty.

What browsers do you see the problem on?

Brave

Any additional comments?

Any quick idea?