I want my web app to show a set of sample images (sample images I will give myself)- and the user can select from among those pictures to use for the 'upload' and 'submit' button on the screen.
Basically I am deploying my ML model that makes different predictions from the image the user uploads. I want to give a few sample images to use instead so the user can better understand the models perspective.
I am not a pro on the dev side and I am having a lot of difficulty finding something similar to it. My front end is HTML, CSS, JS and my backend is on Flask.
The simplest way to display images is to have divs with background images and use flex for styling. A div will be more flexible when it comes to scaling your styles.
// css
.container{
display: flex;
gap: 5%;
flex-wrap: wrap;
}
.imageContainer {
flex: 1 1 200px;
background-image: url('https://source.unsplash.com/random');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}<div class="container">
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div class="imageContainer"></div>
<div>You can then add more styles to your 'imageContainer' div as you add the upload buttons.