<style>
    .image-container img {
        display: none;
    }
    .image-container img.selected {
        display: block;
    }
</style>

<script>
    window.onload = function() {
        let images = document.querySelectorAll('.image-container img');
        let randomIndex = Math.floor(Math.random() * images.length);
        images[randomIndex].classList.add('selected');
        images[randomIndex].src = images[randomIndex].getAttribute('data-src');
    };
</script>
      
<div class="image-container">
    <img data-src="image1.avif" alt="Image 1">
    <img data-src="image2.avif" alt="Image 2">
    <img data-src="image3.avif" alt="Image 3">
    <img data-src="image4.avif" alt="Image 4">
    <img data-src="image5.avif" alt="Image 5">
</div>