How to display images from an array in JavaScript ?
Last Updated :
13 Dec, 2023
Displaying images from an array in HTML can be achieved using various approaches. In this article, we will discuss the syntax and two different approaches to displaying images from an array in HTML.
Below are the approaches that could be used to display images from an array in JavaScript
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 = [
];
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
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 = [
];
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 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 = [
];
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()
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...