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

Question

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

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

Answer 1

为了好玩，因为许多答案都是有效的。

这是一个由200人组成的循环，他们查看picsum中的图片，并将其发送到网格中：

galery = document.querySelector('#galery')
for (let i = 0; i < 200; i++) {
img = document.createElement('IMG')
img.src = 'https://picsum.photos/id/' + i * 4 + '/200/100'
img.setAttribute('alt', img.src)
img.classList.add('img')
galery.appendChild(img)
}

* {
box-sizing: border-box;
}
.img {
display: block;
min-width: 100%;
max-width:100%;
border: solid;
transition: 0.15s
}
div {
margin: auto;
padding: 4% 5px 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
width: 1200px;
max-width: 80%;
}
.img:hover {
transform: scale(2);
}

<div id="galery"></div>

Answer 2

解决方案

以下是一些快速易读的方法：

确保阅读底部的性能部分

使用forEach()循环

// Images array holds the URLs/directories of the images
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 id
const imagesSection = document.querySelector('#images')
// Loop all URLs
urls.forEach(url => {
// Insert the elements into the image section
images.innerHTML += `<img src="${url}" height="100">`
})

<!-- images container -->
<div id="images">
</div>

---

使用for(... of ...)循环

// Images array holds the URLs/directories of the images
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 id
const imagesSection = document.querySelector('#images')
// Loop through all URLs
for (url of urls) {
// Add images to imges section
imagesSection.innerHTML += `<img src="${url}" height="100" >`
}

<!-- images container -->
<div id="images">
</div>

---

使用for()循环

// Images array holds the URLs/directories of the images
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 id
const imagesSection = document.querySelector('#images')
// Loop through all URLs
for (let i = 0; i < urls.length; i++) {
// Get the current URL
const url = urls[i]
// Add images to the images section
imagesSection.innerHTML += `<img src="${url}" height="100" >`
}

<!-- images container -->
<div id="images">
</div>

---

性能

由于要向DOM添加许多元素，所以不应该像我在代码示例中那样使用innerHTML(我使用它是为了可读性和更干净的代码(。CCD_ 5将重新分析并重新创建CCD_ 6元素中的所有DOM元素。相反，您可以执行类似的操作来创建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 id
const imagesSection = document.querySelector('#images')
// Loop through all URLs
urls.forEach(url => {
// Create image node
const img = document.createElement('img')
// Make src equal to the URL
img.setAttribute('src', url)
img.setAttribute('height', '100') // Ignore me (just makes images smaller)
// Append img node to image section
imagesSection.appendChild(img)
})

<div id="images">
</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 location
body = document.getElementById('imagelocation') // Where you want the img tags to be
for (let i = 0;i<imgArr.length;i++) {
newImg = document.createElement('IMG')
newImg.src = imgArr[i].url // Adds the src for the where the image is located
newImg.classList.add('styling') // Optional. We can add styling to the images, i.e., make them all of a uniform size
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++) {
var img = new Image();
var imgname=“img”+i+”.png”;
img.src = imgname;
container.appendChild(img);}
</script>