Working with picture in Blazor

Question

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

Answer 1

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:

---

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.