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

Question

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

Answer 1

解决方案

以下是执行此类操作的一些快速且易于阅读的方法：

请务必阅读底部的性能部分

使用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像我在代码示例中那样使用它（我使用它是为了提高可读性和更清晰的代码）。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 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 2

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

这是一个 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 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>