Display a Random Image on Page Refresh Using HTML and JavaScript

If you want to add a dynamic element to your webpage, showing a different image each time the page is refreshed can be a simple yet effective technique. This guide will walk you through how to accomplish this using basic HTML and JavaScript.

Step 1: Organize Your Images

Start by gathering the images you want to display. Save these images in a directory within your project folder. For example, you could place them in a folder named images. Suppose you have three images: image1.jpg, image2.jpg, and image3.jpg.

Step 2: Set Up the HTML Structure

Next, create an HTML file that will display the images. The img tag will serve as a placeholder for the images that will be randomly selected and displayed. Here’s a basic HTML structure:

Subscribe our Rurban Life YouTube Channel.. "Rural Life, Urban LifeStyle"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image on Refresh</title>
</head>
<body>
    <img id="randomImage" alt="Random Image">
    <script src="script.js"></script>
</body>
</html>

Step 3: Add JavaScript to Select a Random Image

To ensure that a different image is displayed each time the page is refreshed, you need to use JavaScript. Create a file named script.js and include the following code:

// Array containing the paths to your images
const images = [
    'images/image1.jpg',
    'images/image2.jpg',
    'images/image3.jpg'
];

// Function to select a random image
function getRandomImage() {
    const randomIndex = Math.floor(Math.random() * images.length);
    return images[randomIndex];
}

// Set the src attribute of the img tag to the randomly selected image
document.getElementById('randomImage').src = getRandomImage();

Step 4: How the Code Works

Array of Images: The images array holds the paths to the images stored in your project directory.
Random Image Selection: The getRandomImage function generates a random number, which is used to pick an image from the array.
Image Display: The src attribute of the img tag is dynamically set to the selected image, ensuring that a different image is shown every time the page loads.

Step 5: Test Your Webpage

After implementing the code, open your HTML file in a browser. Refresh the page multiple times to see a different image from your predefined list each time.

Implementing a random image display on page refresh is a simple and effective way to enhance user engagement on your website. With just a few lines of JavaScript and a basic understanding of HTML, you can create a dynamic visual experience for your users.