显示一个图像流到客户端在blazor服务器没有javascript?

Question

现在我有以下几行代码:

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

上面的代码段获取一个流，并将该流重新打包成dotnetstreamreference，然后将该dotnetstreamreference传递给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 isloading更改为false，则会在js代码片段中导致错误。这有点违背了加载屏幕的目的。

有更聪明的方法吗?最好不要使用javascript，因为我真的不知道语言，不能修改它，以满足我的需要。

以上代码是blazor上的。net文档的直接引用(不是加载部分，而是流到图像部分):https://learn.microsoft.com/en-us/aspnet/core/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);
}

这个想法是填充一个内存中的元素列表，然后通过使用RenderElementsAsync异步呈现，一次将列表附加到DOM。注意:在原始代码中，应该异步调用JavaScript函数setImageUsingStreaming()。也就是说，您应该使用InvokeAsync而不是InvokeVoidAsync。如果有帮助，请告诉我……

Answer 2

我是根据Yogi在我的帖子评论区给出的答案得出这个结论的:

这里绝对没有必要使用JS，我不知道为什么blazor文档更喜欢这样。

一个简单的例子:

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添加到数组中，或者简单地将其声明为全局以在HTML中获取它:

<img src="@imageURL">