用数组中的图像填充 div答案

【问题标题】：Populating div with images from array用数组中的图像填充 div
【发布时间】：2018-03-24 17:58:01
【问题描述】：

我正在尝试使用 JavaScript 和 jQuery 显示数组中的一些图像。

这是我的容器：

<div class="deck" id="card-deck">
</div>

这是我的 JavaScript：

var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

for (var i = 0; i < masks.length; i++) {
    $(".deck").append('<span>' + masks[i] + '</span>');
}

div 被填充，但带有字符串文本，这是正常的，如何正确显示他存储在数组中的图像？我需要将它们放在一个数组中，因为稍后我会对其进行洗牌等。

【问题讨论】：

<img src="./${masks[i]}" developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery html frontend

【解决方案1】：

const deck = $(".deck"); // only select this once if possible
masks.forEach(mask => deck.append('<img src=./' + mask + '>));

【讨论】：

【解决方案2】：

使用img标签插入span。

var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

for (var i = 0; i < masks.length; i++) {
    $(".deck").append('<img src="./'+masks[i]+'"/>');
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deck" id="card-deck">
</div>

【讨论】：

【解决方案3】：

没有癌症：

var masks = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

masks.forEach(src => {
    const img = document.createElement("img");
    img.src = src;
    img.title = src; // To tell them apart.
    window["card-deck"].appendChild(img);
});

<div class="deck" id="card-deck">
</div>

【讨论】：

【解决方案4】：

var $cardDeck = $("#card-deck");

var imgUrls = [
    "https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940",
    "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
];


for (var i = 0; i < imgUrls.length; i++) {
   var $card = $("<div>", {"id":"card"});
    // using urls, but you can easily adjust this line and the imgUrls array to use image files
    $card.css("background-image", "url(" + imgUrls[i] + ")");
    $cardDeck.append($card);
}

#card-deck {
  width: 10em;
  height: 10em;
  background-color: #0f0;
  border: 1px solid #f00;
}

#card {
  width: 10em;
  height: 1em;
  border: 1px solid #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="deck" id="card-deck">
</div>

【讨论】：