分配多个图像路径以在 blazor 中显示缩略图

Question

我有一个模式，应该接受按区域分类的多个图像文件输入。

<div class="modal" tabindex="-1" role="dialog" id="thumbnailsModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Manage Flyer Thumbnails</h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        @if (firstPage == null)
                        {
                            <p>Flyer needs at least one page to be able to add thumbnails</p>
                        }
                        else
                        {
                            <RadzenGrid @ref="grid" Style="height:395px;color:#000000;" Data="@thumbnails" AllowPaging="false" PageSize="5" AllowFiltering="false" AllowSorting="true" TItem="Thumbnail" RowSelect="@ThumbnailSelected" EditMode=DataGridEditMode.Single Value="@firstThumbnail">
                                <Columns>
                                    <RadzenGridColumn TItem="Thumbnail" Property="RowNumber" Title="#" Context="data" Type="integer" Width="25px" Visible="false">
                                        <Template>
                                            @data.RowNumber
                                        </Template>
                                    </RadzenGridColumn>
                                    <RadzenGridColumn TItem="Thumbnail" Property="Zone" Title="Zone" Context="data" Type="text" Width="125px">
                                        <Template>
                                            @data.Zone
                                        </Template>
                                    </RadzenGridColumn>
                                    <RadzenGridColumn TItem="Thumbnail" Property="Filename" Title="Filename" Context="data" Type="text" Width="125px">
                                        <Template>
                                            @data.Filename
                                        </Template>
                                    </RadzenGridColumn>
                                </Columns>
                            </RadzenGrid>
                        }
                    </div>
                    <div class="col-6">
                        @if (!string.IsNullOrEmpty(selectedZone))
                        {
                            @if (!@isDeleteButtonDisabled)
                            {
                                @*<img height="600" width="600" src="api/thumbnail/@Flyer.Id/@pageId/@selectedZone" />*@
                                <img height="600" width="600" src=@imagePath />
                                <br />
                            }
                            <BlazorInputFile.InputFile id="inputFile" multiple OnChange="@SetImage" />
                            @*  <RadzenUpload Multiple="true" Url="upload/multiple" Change="@SetImage" Class="w-100" />*@
                            @if (!@isDeleteButtonDisabled)
                            {
                                <br />



                                <br />
                                <input type="button" class="btn btn-secondary" value="Delete" @onclick="Delete" disabled=@isDeleteButtonDisabled />
                            }
                        }
                    </div>
                </div>
            </div>
            <CoralUI.Dialog Title="@errorTitle" Content="@errorContent" @ref="errorDialog" />
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>

我想要实现的是，当一个或多个文件被上传时，文件通过文件名匹配到其相应的区域，如我的设置图像方法中所示。

    async Task SetImage(IFileListEntry[] files)
    {
        foreach (var file in files)
        {
            foreach (var thumbnail in thumbnails)
            {
                if (file.Name.Contains(thumbnail.Zone.ToString()))

                {
                    thumbnail.Filename = file.Name;
                    thumbnail.Image = file.Data;
                    await Save();
                }

            }
            

        }



        isDeleteButtonDisabled = false;
        StateHasChanged();
    }

然后我将每个区域的图像路径值存储在字典中并尝试分配它们。

    private async Task Save()
    {
        try
        {
            foreach (var thumbnail in thumbnails)
            {
                await FlyerRepository.DeleteDataOneAsync(Flyer.Id, pageId, thumbnail.Zone);

                var metadata = new FlyerMetadata
                    {
                        PageId = pageId,
                        FlyerId = Flyer.Id,
                        Zone = thumbnail.Zone
                    };



                await FlyerRepository.SaveDataAsync(thumbnail.Filename, thumbnail.Image, metadata);
                imagePath = string.Format("api/thumbnail/{0}/{1}/{2}/{3}", Flyer.Id, pageId, thumbnail.Zone, DateTime.Now.ToString().Replace(" ", "_"));
                ImagePathValues.Add(thumbnail.Zone, imagePath);
            }
            foreach (var thumbnail in thumbnails)
            {
                foreach (var path in ImagePathValues)
                {
                    if (thumbnail.Zone == path.Key)
                    {
                        imagePath = path.Value;
                    }
                }
            }

        }

        catch (Exception exception)
        {
            errorTitle = "Error saving thumbnail.";
            errorContent = exception.Message;
            errorDialog.Open();
        }
    }

不幸的是，我似乎无法正确保存，而且我的图像路径没有显示我的缩略图。我似乎无法弄清楚如何解决这个问题。如有任何帮助，我们将不胜感激！

Answer 1

我认为您至少需要一个 img 标签来显示图像。我有一个 Blazor 应用程序，它使用 url.

显示来自云源的图像

<img class="deviceimage"
     src="@preview?.SourceUrl"
     @onclick="@(() => ImageClicked(@preview?.SourceUrl))" />

分配多个图像路径以在 blazor 中显示缩略图

Assigning multiple image paths to show thumbnail in blazor

c#

blazor