Question

我正在尝试使用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被填充，但是使用字符串文本，这是正常的，如何正确显示他存储在数组中的图像？我需要它们在数组中，因为稍后我会将它们改组等等。

Answer 1

public class Proxy {

public static void main(String[] args) throws Exception , IOException , FileNotFoundException {

    //Start of Dialog Box

    JComboBox<String> Server = new JComboBox<>(
            new String[] { "us", "usrelease", "uk", "ukrelease" , "ca" , "au" , "de" , "fr" , "at" , "ru" , "cn" , "es" , "jp" , "nz" , "hk" });
    JTextField Amount = new JTextField();
    JTextField ServerNumber = new JTextField();
    JComboBox<String> random = new JComboBox<>(
            new String[] { "Single", "Multiple"});
    JComboBox<String> type = new JComboBox<>(
            new String[] { "Static", "Sticky"});
    Object[] message = {
            "Server Code", Server,
            "Standard or Random", random,
            "How Many Different Proxies", Amount,
            "What Server Number", ServerNumber,
            "Type", type,
    };

Answer 2

使用img的{{1}}标记。

＆＃13;

span

＆＃13;

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

＆＃13;

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

Answer 4

这是一种在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>

Answer 5

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

使用数组中的图像填充div

5 个答案: