Question

我正在学习HTML和JavaScript并开始，我正在创建一个使用for循环显示4个图像的简单网站。但是，当我在浏览器中查看时，我只能看到图像的名称，而不能看到图像本身。这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<div id = "products" align = "center">

 <script>

  function showImages() {
    var productImg = new Array("a.png", "b.png", "c.png","d.png");
    var x = " ";

     for (var i = 0; i < productImg.length; i++) {

        var image = productImg[i];
        x += image;

    }

    var getImg = document.getElementById('products').innerHTML = x;
}



  </script>
  </div>
  <body onload = "showImages()">

   </body>
   </html>

我在这里缺少什么？提前谢谢。

Answer 1

这应该有效。你的图片需要img标签:)对于问题你错过了什么，我必须用HTML回答几乎所有内容。

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script>
        function showImages() {
            var productImg = ["a.png", "b.png", "c.png","d.png"];
            var x = "";
            for (var i = 0; i < productImg.length; i++) {
                var image = productImg[i];
                x += '<img src="' + image + '"/>';
            }
            var getImg = document.getElementById('products').innerHTML = x;
        }
        </script>
    </head>
    <body onload="showImages()">
    <div id="products" align="center"></div>
    </body>
</html>

Answer 2

Joni的答案非常正确 - 但是在您学习的同时，请记住HTML“只是”一个结构化的文本文档，这将为您带来很长的路要走。一旦你准备好动态创建内容，那么就准备好用DOM进行大量的学习了。但是，看起来你已经知道了一些代码，所以这只是成功的一半。 ;）

为了让您了解如何使用JS执行此操作，您要查找的是Image对象。您可以通过编写类似var myPicture = new Image();的内容来创建新图像。就目前而言，这在您的文档中尚不存在，并且它没有源 - 资源的路径，但您确实有对新图像的引用，您可以使用它来执行操作。

您可以通过更改其src属性为其提供来源，例如：myPicture.src="a.png";。但是，您必须记住（这对很多很多事情来说）加载该图像的操作是异步。这意味着如果要将图像添加到文档中，则在加载图像之前不会看到任何内容。图像是开始理解这一点的好地方。尝试在控制台中使用这些命令（chrome中的开发人员工具），看看它有什么不同。

var myPicture = new Image();
myPicture.src = 'a.png';
document.body.appendChild(myPicture); // may or may not show the image, depending on how long it takes to load, but should be almost instant on a localhost or file

var myEmptyPicture = new Image();
document.body.appendChild(myEmptyPicture); // you will see the empty image tag in the document
myEmptyPicture.onload = function(){
  console.log('I have finished loading the picture!')
};
myEmptyPicture.src = 'b.png'; // you kept the reference to the image, so you can change its src attribute even while it is in the document - this is important for more advanced stuff, and it should log a message to your console

// last one, this will insert itself into the document once it has loaded
myAutomaticPicture = new Image();
myAutomaticPicture.onload = function(){
  console.log('picture loaded, inserting into document');
  document.body.appendChild(myAutomaticPicture); // should see it in the document now
}
myAutomaticPicture.src = 'c.png';

onload属性的特殊之处在于它将一个函数作为其值。图像加载完成后调用此函数。

要尝试的事项，更改DOM中已有元素的src属性，或使用document.createElement方法创建其他元素并附加它们（例如：var heading = document.createElement('h1'); heading.innerHTML='hello'; document.appendChild(heading);）。

一旦你开始看到这一切是如何结合起来的，这很有趣......

JavaScript：图像数组

2 个答案: