Blazor Image not updating after uploading new to Azure

Question

I have a blazor WebAssembly Hosted solution and I am using AzureBlobStorage for image storage of user profile photos. I can upload the photo fine and it works and displays correctly, however, when a new photo is loaded to replace the old in Azure, Blazor is not updating to render the new photo.

I am using a RadzenFileInput to upload the photo, this converts the photo into a base64 string

<div class="align-items-center d-flex">
     <RadzenLabel Text="Profile Photo" Style="width: 150px" />
</div>
<div class="w-100">
     <RadzenFileInput class="newInput" @bind-Value=@User.Photo TValue="string"  />
</div>

When Saved it uploads that to azure storage

public async Task<string> UploadUserPhoto(string base64ImageString, string userId)
        {
            try
            {
                var encodedImage = base64ImageString.Split(',')[1];
                var decodedImage = Convert.FromBase64String(encodedImage);

                BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_configuration["AzurBlob:UserContainer"]);
                BlobClient blobClient = containerClient.GetBlobClient(userId);

                using (var fileStream = new MemoryStream(decodedImage))
                {
                    // upload image stream to blob
                    await blobClient.UploadAsync(fileStream, true);
                }

                return $"https://{url}/{_configuration["AzurBlob:UserContainer"]}/{userId}";
            }
            catch (Exception ex)
            {
                _logger.LogError(ex, $"Update() - Error uploading image to blob storage");
                return null;
            }            
        }

The image is loaded properly and I see it in Azure container that it has changed. This is how I am displaying the Image on the razor page

<img src="@User?.PhotoUrl" class="d-block img-fluid" alt="Default">

So the src is the Blobs URL. What is happening is the page is showing the originally uploaded photo, not the new uploaded photo. If I reload the page, it still shows the old photo. If I Inspect the HTML from the page source and mouse over the SRC url it shows a preview of the correct image however that is not what is rendered on the screen.

Is blazor downloading this image into a cache? How do get it to refresh the image?

Blazor Image not updating after uploading new to Azure

0 Answers0