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.
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 Loop: We can use a loop to iterate through the array of images and display each image using the <img> tag.
Example:
HTML
<!DOCTYPE html><html><head> <title>Display Images from Array</title></head><body> <h1 style="color: green;"> neveropen </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
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.
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:
HTML
<!DOCTYPE html><html><head> <title>Display Images from Array</title></head><body> <h1 style="color: green;"> neveropen </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
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.
Approach 3: Using a forEach(): We can iterate over the whole array elements using the forEach() method and can display image using <img> tag.
HTML
<!DOCTYPE html><html><head> <title>Display Images from Array</title></head><body> <h1 style="color: green;"> neveropen </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()
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.
