Working with picture in Blazor

MIPAKTEH_1 180 Reputation points


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 "/"



<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" />

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

Accepted answer
  1. Brando Zhang-MSFT 3,201 Reputation points Microsoft Vendor

    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 "/"
    <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()


    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