TA貢獻1818條經(jīng)驗 獲得超3個贊
以下是執(zhí)行此類操作的一些快速且易于閱讀的方法：
請務(wù)必閱讀底部的性能部分
forEach()循環(huán)// 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 ...)循環(huán)
// 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()循環(huán)
// 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>
表現(xiàn)
由于您將向 DOM 添加許多元素，因此您不應(yīng)該innerHTML像我在代碼示例中那樣使用它（我使用它是為了提高可讀性和更清晰的代碼）。innerHTML將重新解析并重新創(chuàng)建該元素中的所有 DOM 元素div。相反，您可以執(zhí)行類似的操作來創(chuàng)建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>
TA貢獻1735條經(jīng)驗 獲得超5個贊
為了好玩，因為許多答案都很有效。
這是一個 200 個循環(huán)，查看 picsum 中的圖片并將它們分配到網(wǎng)格中：
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>
TA貢獻1799條經(jīng)驗 獲得超6個贊
使用 JavaScript 您可以創(chuàng)建 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)
}
TA貢獻1752條經(jīng)驗 獲得超4個贊
您可以將文件夾中的所有圖像命名為 img0.png、img1.png...img199.png（您可以使用簡單的 python 代碼重命名圖像），然后使用下面的 javascript 代碼添加它們通過循環(huán)訪問 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>
舉報