javascript - 显示图像阵列中的图像不起作用

Question

下面的代码尝试显示图像数组中的图像，但无法在 html 标签的 ul 中显示。

它使用javascript 来设置图像的宽度和高度。和jquery调用显示所有图像功能。

如何更正它以显示图像数组中的图像？

var backgroundImage = new Array(); 
backgroundImage[0] = "https://picsum.photos/200/300/?random";
backgroundImage[1] = "https://picsum.photos/200/300/?random";
backgroundImage[2] = "https://picsum.photos/200/300/?random";
backgroundImage[3] = "https://picsum.photos/200/300/?random";
backgroundImage[4] = "https://picsum.photos/200/300/?random";
backgroundImage[5] = "https://picsum.photos/200/300/?random";
backgroundImage[6] = "https://picsum.photos/200/300/?random";

function displayAllImages() {
    var i = 0,
        len = backgroundImage.length;        
    for (; i < backgroundImage.length; i++) {
        
        var img = new Image();
        img.url = backgroundImage[i];
        img.style.width = '200px';
        img.style.height = '200px';
        
        document.getElementById('images').appendChild(img);
    }
};

$(function() {
    displayAllImages();   
});

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

    <div class="backgoundImage">
        <ul id="images"></ul>
    </div>
</div>

Answer 1

应该是 img.src 而不是 img.url。

var backgroundImage = new Array(); 
   //Use a loop instead
   // backgroundImage[0] = "https://picsum.photos/200/300/?random";
   // backgroundImage[1] = "https://picsum.photos/200/300/?random";
   // backgroundImage[2] = "https://picsum.photos/200/300/?random";
   // backgroundImage[3] = "https://picsum.photos/200/300/?random";
   // backgroundImage[4] = "https://picsum.photos/200/300/?random";
   // backgroundImage[5] = "https://picsum.photos/200/300/?random";
   // backgroundImage[6] = "https://picsum.photos/200/300/?random";

//omit the last query param if all images are to be the same
for(var j = 0; j <= 6; j++){
   backgroundImage[j] = "https://picsum.photos/200/300/?random&img="+j;
}
function displayAllImages() {
    var i = 0,
        len = backgroundImage.length;        
    for (; i < backgroundImage.length; i++) {
        
        var img = new Image();
        img.src = backgroundImage[i];
        img.style.width = '200px';
        img.style.height = '200px';
        
        document.getElementById('images').appendChild(img);
    }
};

$(function() {
    displayAllImages();   
});

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

    <div class="backgoundImage">
        <ul id="images"></ul>
    </div>
</div>

同时检查:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Image_loading_errors