在没有JavaScript的Blazor Server中向客户端显示图像流？

Question

目前，我有以下代码行：

private async Task SetImageUsingStreamingAsync()
{
    var imageStream = await GetImageStreamAsync();
    var dotnetImageStream = new DotNetStreamReference(imageStream);
    await JSRuntime.InvokeVoidAsync("setImageUsingStreaming", 
        "image1", dotnetImageStream);
}

上面的摘要获取流，然后将流到dotnetstreamReferance中进行重新包装，然后将dotnetStreamReferance传递给JS函数：

async function setImageUsingStreaming(imageElementId, imageStream) {
  const arrayBuffer = await imageStream.arrayBuffer();
  const blob = new Blob([arrayBuffer]);
  const url = URL.createObjectURL(blob);
  document.getElementById(imageElementId).src = url;
} 

通过ID填充HTML元素。这一切都很好，可以正常工作，但是如果我想在DB中获得流的过程时要有一个加载屏幕：

if(isloading)
{
  show loadingscreen
}
else
{
   foreach(string in listofstrings)
   {
     <img id="somename"></img>
   }
}

IMG元素不会“出现”，并且如果BOOL的加载，则会在JS片段中造成错误在填充网站上的图像之前，不会更改为false。哪种用加载屏幕击败了目的。

这样做的方法更聪明吗？最好不使用JavaScript，因为我真的不知道该语言，也无法根据我的需求进行修改。

上面的代码是来自Blazor上的.NET文档的直接引用（不是加载部分，而是图像零件的流）： https://learn.microsoft.com/en-us/aspnet/aspnet/core/blazor/blazor/images?view= aspnetcore-6.0

Answer 1

if (isloading) 
{
  // show loadingscreen
} 
else 
{
    // Populate a list with image elements...
    List imageElements = new List();
    foreach(string in listofstrings) 
    {
        Element image = new Element("img");
        image.Id = "somename";
        imageElements.Add(image);
    }

    // ...and append the list to the DOM using RenderElementsAsync
    // to ensure that it is rendered only when the list is fully
    // populated.
    await JSRuntime.InvokeAsync("setImageUsingStreaming", imageElements, dotnetImageStream);
}

这个想法是通过使用RenderElelementsAsync将其异步渲染，然后将列表填充元素中的内存列表，然后将列表一一添加到DOM。
注意：在原始代码中，您应该调用JavaScript函数setImageUsingStreaming（）异步。也就是说，您应该使用InvoKeasync而不是InvokeVoidAsync。
让我知道这是否有帮助...

Answer 2

我根据瑜伽士的回答在我的帖子评论部分中的答案中弄清楚了：

在这里绝对没有必要使用JS，我不知道为什么大餐文档喜欢这种方式。

一个简单的示例：

private async Task PopulateImageFromStream(Stream stream)
    {
            MemoryStream ms = new MemoryStream();
            stream.CopyTo(ms);
            byte[] byteArray = ms.ToArray();
            var b64String = Convert.ToBase64String(byteArray);
            string imageURL = "data:image/png;base64," + b64String;
        }
    }

将imageUrl添加到数组中，或者只是将其声明为Globaly即可在HTML中获取它：

<img src="@imageURL">