Question

我是JavaScript新手，我制作了这段代码。此代码的目的是使用JavaScript和HTML在网站中显示图像的ARRAY。它们都需要立即显示。这是到目前为止的代码，但它无法正常工作。

<html>
<head>
<script>
        var ArrayOfImages = [];

        var Image1 = new Image1()
        image1.src = "image1.jpg";

        var Image2 = new Image2()
        Image2.src = "image2.jpg";

        var Image2 = new Image3()
        Image3.src = "image3.jpg";

        ArrayOfImages.push(Image1);
        ArrayOfImages.push(Image2);
        ArrayOfImages.push(Image3);
        ArrayOfImages.toString();
        document.write(ArrayOfImages);
</script>
</head>
<body>
</body>
</html>

当我运行此代码时，我得到的只是一个空网页。

对于任何想知道的人来说，这些图像与html文件位于同一个文件中。我对JavaScript和HTML也比较陌生，所以请明确如何解决它。

Answer 1

你必须在body中使用array.forEach然后append每个数组项。就像这个

var ArrayOfImages = ['image1.jpg', 'image2.jpg', 'image3.jpg']; //your assumed array
ArrayOfImages.forEach(function(image) {    // for each link l in ArrayOfImages
  var img = document.createElement('img'); // create an img element
  img.src = image;                         // set its src to the link l
  document.body.appendChild(img);          // append it to the body 
});

请参阅小提琴：Fiddle

<强>更新

您也可以设置height和width作为您的要求。如下所示。

var ArrayOfImages = ['https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg', 'https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg']; //your assumed array
ArrayOfImages.forEach(function(image) {
  var img = document.createElement('img');
  img.src = image;
  img.height = "45";
  img.width = "50";
  document.body.appendChild(img);
});

在JavaScript中输出图像数组

1 个答案: