How to show 3 picture per line on pages Blazor.

MIPAKTEH_1 260 Reputation points
2024-05-30T15:49:57.01+00:00
@page "/"

<PageTitle>Home</PageTitle>

<h1>HOUSE</h1>


@for (int i = 0; i < images.Count - 1; i = i + 3 )
{
    <img src=@($"/Images/{i}") />
}

@code {
    // Define the list of image file names
    private readonly List<string> images = new()
    {
        "H_.jfif",
        "H_2.jfif",
        "H_3.jfif",
        "H_4.jfif",
        "H_5.jfif",
        "H_6.jfif",
        "H_7.jfif",
        "H_8.jfif",
        "H_9.jfif"

    };
}


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,477 questions
0 comments No comments
{count} votes

Accepted answer
  1. Viorel 114.1K Reputation points
    2024-05-30T17:49:06.51+00:00

    Try a simple approach too:

    @for( int i = 1; i <= images.Count; ++i )
    {
        <img src=@($"/Images/H_{i}.jfif") />
        @if( ( i % 3 ) == 0 )
        {
            <br />
        }
    }
    
    0 comments No comments

0 additional answers

Sort by: Most helpful