Заполнение div изображениями из массива

Я пытаюсь отобразить некоторые изображения из массива с помощью 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 заполняется, но со строковым текстом, что нормально, как правильно отображать изображения, которые он хранит в массиве? Мне они нужны в массиве, потому что позже я их перетасую и т. д.

🤔 А знаете ли вы, что...
JavaScript позволяет создавать собственные серверные приложения с использованием платформы Node.js.

96

5

Javascript273878 вопросов Jquery62551 вопрос Html113619 вопросов Frontend1808 вопросов

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

Используйте тег 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>

Без рака:

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>

Вот способ добавить все изображения в div.

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]+'   /><br>' );
}

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

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>

Заполнение div изображениями из массива

Ответы:

Интересные вопросы для изучения