Is there a way that I can allow a incrementing counter to display a image on the index page when even and another when false. In the body is my try

Question

@page "/counter"

Counter

Current count: @currentCount

<button class="btn btn-primary" @onclick="IncrementCount">Click me

@code { private int currentCount = 0;

private void IncrementCount() { currentCount++; if (currentCount % 2 == 0) { <img src="~/Images/black_atlasian_mode copy.png" /> } else { <img src="~/Images/teal_atlasian_mode copy.png" /> } }

}

Alamakanambra · Accepted Answer · 2021-10-28 16:11:11Z

You are close. Image hase to be in html part, you are changing src only:

Current count: @currentCount <button class="btn btn-primary" @onclick="IncrementCount">Click me </button> <img src="@src" /> @code { private int currentCount = 0; string src = "~/Images/black_atlasian_mode copy.png"; private void IncrementCount() { currentCount++; if (currentCount % 2 == 0) { src = "~/Images/black_atlasian_mode copy.png"; } else { src = "~/Images/teal_atlasian_mode copy.png"; } } }

Thanks I was able to take your code and make it work. @page "/counter" to the top. I wasn't able to get the images to work until I put them directly into the wwwroot. I was think that if I added a Folder called Images under the wwwroot and place them there it would. Any suggestions?
Yes, images has to me somewhere inside the wwwroot. The rest of the code is not accessible. If you add additional folder it will make your path as this: src="images/image.png". If you have a lot of images and you don't want to drag them everywhere, use something like Blob Storage and track the urls in db..

Collectives™ on Stack Overflow

Is there a way that I can allow a incrementing counter to display a image on the index page when even and another when false. In the body is my try

Counter

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Counter

1 Answer 1

2 Comments

Related