将数百张图像注入div

时间:2019-01-07 12:15:47

标签: javascript html image

我想知道如何在div中自动添加数百张图像。我有一个包含图像的文件夹,我想知道是否存在避免复制和粘贴相同代码的技术。

例如:<img src="img/01.png">

想法是将此代码注入div并更改图像名称:01.png,02.png,03.png ...

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

You can generate the html using javascript if you run this html page it'll display the tags for the first 99 images.

<!DOCTYPE html>
<html>
<head>
  <title>Hello</title>
</head>
<body>
  <p id="my_output"></p>
  <script>
    let escapeHTML = function (aValue) {
      return (
        aValue.replace(/>/g, '&gt;').
          replace(/</g, '&lt;').
          replace(/"/g, '&quot;')
      )
    }

    let myOutput = document.querySelector('#my_output')

    for (let i = 1; i < 100; ++i) {
      let paddedIndex = ('0' + i).slice(-2)
      myOutput.innerHTML += escapeHTML('<img src="img/' + paddedIndex + '.png">') + '<br>'
    }
  </script>
</body>
</html>

You can then copy paste the output into your code.