Заполнение 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]+'"/>');
    
}

<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>

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>