Horje
How to display images from an array in JavaScript ?

Displaying images from an array in JavaScript involves storing image URLs within the array and dynamically generating HTML elements, such as <img>, using JavaScript. By iterating over the array, each image URL is used to create <img> elements, which are then appended to the document for display.

Below are the approaches that could be used to display images from an array in JavaScript

Table of Content

Syntax:

<img src="image-url" alt="alternative-text">

Here, the src attribute specifies the URL of the image, and the alt attribute provides alternative text for the image if it cannot be displayed.

Approach 1: Using a For Loop

We can use a loop to iterate through the array of images and display each image using the <img> tag.

Example: In this example, we have an array of image URLs, and we use a for loop to iterate through the array and create an <img> tag for each image. We set the src attribute of each <img> tag to the corresponding image URL and append it to the container element.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Display Images from Array</title>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h1>Display Images from Array using a Loop</h1>
    
    <div id="image-container"></div>
    
    <script>
        const images = [
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg'
        ];
    
        const container = document.getElementById('image-container');
    
        for (let i = 0; i < images.length; i++) {
            const img = document.createElement('img');
            img.src = images[i];
            container.appendChild(img);
        }
    </script>
</body>

</html>

Output:

using loop method

Approach 2: Using Array.map() Method

We can use the map() method of the array to create an array of <img> tags and then join them into a string to display them in the HTML.

Example: In this example, we create an array of <img> tags using the map() method of the array. We set the src attribute of each <img> tag to the corresponding image URL using a template literal. Finally, we join the array of <img> tags into a string and set it as the innerHTML of the container element.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Display Images from Array</title>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h1>
        Display Images from Array 
        using Array.map()
    </h1>
    
    <div id="image-container"></div>
    
    <script>
        const images = [
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg'
        ];

        const container = 
            document.getElementById('image-container');

        const imageTags = 
            images.map(img => `<img src="${img}">`);

        container.innerHTML = imageTags.join('');
    </script>
</body>

</html>

Output:

using Array.map() method

Approach 3: Using a forEach() method

We can iterate over the whole array of elements using the forEach() method and can display image using <img> tag.

Example: In this example, we have an array of image URLs, and we use a forEach() to iterate through the array and create an <img> tag for each image. We set the src attribute of each <img> tag to the corresponding image URL and append it to the container element.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Display Images from Array</title>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h1>
          Display Images from Array using 
          Array.forEach()
      </h1>

    <div id="image-container"></div>

    <script>
        const images = [
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg'
        ];

        const container = document.getElementById('image-container');
        images.forEach(image => {
            const img = document.createElement('img');
            img.src = image;
            container.appendChild(img);
        })
    </script>
</body>
</html>

Output:

Using forEach()


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Next.js getInitialProps Next.js getInitialProps
JavaScript Date setYear() Method JavaScript Date setYear() Method
JavaScript Array findLastIndex() Method JavaScript Array findLastIndex() Method
Next.js Disabling ETag Generation Next.js Disabling ETag Generation
Difference between ScriptManager and ScriptManagerProxy Difference between ScriptManager and ScriptManagerProxy

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 10



 

Horje