Назначение нескольких путей изображения для отображения миниатюры в blazor

У меня есть модальное окно, которое должно принимать несколько входных файлов изображений, которые классифицируются по зонам.

<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();
        }
    }

К сожалению, я не могу правильно сохранить, и мой путь к изображению не показывает мою миниатюру. Я не могу понять, как решить эту проблему. Любая помощь будет оценена по достоинству!

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вам по крайней мере понадобится тег img для отображения изображения. У меня есть приложение Blazor, которое показывает изображения из облачного источника, используя URL-адрес.

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

Другие вопросы по теме