Working with picture in Blazor

MIPAKTEH_1 365 Reputation points
2024-05-28T08:36:35.8933333+00:00

Hi,

I very newest.Create project under Blazor web develop.

Under root wwwroot create folder name Images then put some picture in there.

I write the in Home.razor to show all picture but one line one picture.

How to write one line code for all picture.

@page "/"

<PageTitle>Home</PageTitle>

<h1>HOUSE</h1>

<img src="/Images/house_.png" asp-append-version="true" width="100px" />

<img src="/Images/house_1.png" asp-append-version="true" width="100px" />

<img src="/Images/house_2.png" asp-append-version="true" width="100px" />

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,592 questions
0 comments No comments
{count} votes

Accepted answer
  1. Brando Zhang-MSFT 3,696 Reputation points Microsoft Vendor
    2024-05-28T13:19:54.7133333+00:00

    Hi @MIPAKTEH_1,

    According to your description, you could generate the image element by using foreach and create a model class inside the component to show the image folder's name.

    More details, you could refer to below sample:

    @page "/"
    <PageTitle>Home</PageTitle>
    <h1>Hello, world!</h1>
    Welcome to your new app.
    @* Use a foreach loop to render each image *@
    @foreach (var image in images)
    {
        <img src=@($"/Images/{image}") asp-append-version="true" width="100px" style="display:block; margin-bottom:10px;" />
    }
    @code {
        // Define the list of image file names
        private readonly List<string> images = new()
        {
            "house_.png",
            "house_1.png",
            "house_2.png"
        };
    }
    
    

    Result:

    User's image


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.