如何通过不一张一张添加的方式将200张照片插入到HTML <img> 标签中

Question

我遇到的情况是，画廊有几个类别，每个类别都有大约 200 张照片。什么是最好的可选和简单的方法来处理不在 HTML 中一一添加的情况？

该网站基于 HTML、CSS 和 JavaScript，而不是 WordPress。

Answer 1

解决方案以下是执行此类操作的一些快速且易于阅读的方法：请务必阅读底部的性能部分使用forEach()循环// Images array holds the URLs/directories of the imagesconst urls = ['https://images.unsplash.com/photo-1494548162494-384bba4ab999','https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875','https://images.unsplash.com/photo-1500382017468-9049fed747ef']// Get the element by idconst imagesSection = document.querySelector('#images')// Loop all URLsurls.forEach(url => {&nbsp; // Insert the elements into the image section&nbsp; images.innerHTML += `<img src="${url}" height="100">`})<!-- images container --><div id="images"></div>使用for(... of ...)循环// Images array holds the URLs/directories of the imagesconst urls = ['https://images.unsplash.com/photo-1494548162494-384bba4ab999','https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875','https://images.unsplash.com/photo-1500382017468-9049fed747ef']// Get the element by idconst imagesSection = document.querySelector('#images')// Loop through all URLsfor (url of urls) {&nbsp; // Add images to imges section&nbsp; imagesSection.innerHTML += `<img src="${url}" height="100" >`}<!-- images container --><div id="images"></div>使用for()循环// Images array holds the URLs/directories of the imagesconst urls = ['https://images.unsplash.com/photo-1494548162494-384bba4ab999','https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875','https://images.unsplash.com/photo-1500382017468-9049fed747ef']// Get the element by idconst imagesSection = document.querySelector('#images')// Loop through all URLsfor (let i = 0; i < urls.length; i++) {&nbsp; // Get the current URL&nbsp; const url = urls[i]&nbsp; // Add images to the images section&nbsp; imagesSection.innerHTML += `<img src="${url}" height="100" >`}<!-- images container --><div id="images"></div>表现由于您将向 DOM 添加许多元素，因此您不应该innerHTML像我在代码示例中那样使用它（我使用它是为了提高可读性和更清晰的代码）。innerHTML将重新解析并重新创建该元素中的所有 DOM 元素div。相反，您可以执行类似的操作来创建img元素。const urls = ['https://images.unsplash.com/photo-1494548162494-384bba4ab999','https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875','https://images.unsplash.com/photo-1500382017468-9049fed747ef']// Get the element by idconst imagesSection = document.querySelector('#images')// Loop through all URLsurls.forEach(url => {&nbsp; // Create image node&nbsp; const img = document.createElement('img')&nbsp; // Make src equal to the URL&nbsp; img.setAttribute('src', url)&nbsp; img.setAttribute('height', '100') // Ignore me (just makes images smaller)&nbsp; // Append img node to image section&nbsp; imagesSection.appendChild(img)})<div id="images"></div>

Answer 2

为了好玩，因为许多答案都很有效。这是一个 200 个循环，查看 picsum 中的图片并将它们分配到网格中：galery = document.querySelector('#galery')for (let i = 0; i < 200; i++) {&nbsp; img = document.createElement('IMG')&nbsp; img.src = 'https://picsum.photos/id/' + i * 4 + '/200/100'&nbsp; img.setAttribute('alt', img.src)&nbsp; img.classList.add('img')&nbsp; galery.appendChild(img)}* {&nbsp; box-sizing: border-box;}.img {&nbsp; display: block;&nbsp; min-width: 100%;&nbsp; max-width:100%;&nbsp; border: solid;&nbsp; transition: 0.15s}div {&nbsp; margin: auto;&nbsp; padding: 4% 5px 0;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(6, 1fr);&nbsp; grid-gap: 5px;&nbsp; width: 1200px;&nbsp; max-width: 80%;}.img:hover {&nbsp; transform: scale(2);}<div id="galery"></div>

Answer 3

使用 JavaScript 您可以创建 HTML 元素：imgArr = // I am not sure if you're reading them from a file, etc. But we need an array of all the images src locationbody = document.getElementById('imagelocation') // Where you want the img tags to befor (let i = 0;i<imgArr.length;i++) {&nbsp; newImg = document.createElement('IMG')&nbsp; newImg.src = imgArr[i].url // Adds the src for the where the image is located&nbsp; newImg.classList.add('styling') // Optional. We can add styling to the images, i.e., make them all of a uniform size&nbsp; body.appendChild(newImg)}

Answer 4

您可以将文件夹中的所有图像命名为 img0.png、img1.png...img199.png（您可以使用简单的 python 代码重命名图像），然后使用下面的 javascript 代码添加它们通过循环访问 DOM<div><p id="photos" /></div><script>var container=document.getElementById("photos");for (var i=0, len<200,i++) {&nbsp;var img = new Image();&nbsp;var imgname=“img”+i+”.png”;&nbsp;img.src = imgname;&nbsp;container.appendChild(img);}</script>