JavaScript 如何显示来自数组的图片

可以使用各种方法在HTML中显示来自数组的图片。在本文中，我们将讨论语法和两种不同的方法来在HTML中显示来自数组的图片。

语法：

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

这里， src属性 指定图像的URL， alt属性 为图像提供替代文本，如果无法显示图像。

方法1：使用循环： 我们可以使用循环遍历图像数组，并使用<img>标签显示每个图像。

例子：

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>

输出：

JavaScript 如何显示来自数组的图片

在这个例子中，我们有一个包含图片URL的数组，并且我们使用一个for循环来遍历数组并为每张图片创建一个<img>标签。我们将每个<img>标签的src属性设置为相应的图片URL，并将其附加到容器元素上。

方法2：使用Array.map()方法： 我们可以使用数组的map()方法来创建一个<img>标签的数组，然后将它们连接成一个字符串以在HTML中显示。

示例：

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>

输出：

JavaScript 如何显示来自数组的图片

在这个例子中，我们使用数组的map()方法创建一个包含<img>标签的数组。我们使用模板字面量将每个<img>标签的src属性设置为相应的图像URL。最后，我们将<img>标签的数组连接成一个字符串，并将其设置为容器元素的innerHTML。

方法3：使用forEach()： 我们可以使用forEach()方法迭代整个数组元素，并使用<img>标签显示图像。

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>

输出：

JavaScript 如何显示来自数组的图片