如何正确显示从数组中获取的图像[重复]答案

【问题标题】：How to properly display an image taken from an array [duplicate]如何正确显示从数组中获取的图像[重复]
【发布时间】：2018-12-16 11:59:37
【问题描述】：

我正在尝试使数组中的随机图像在页面加载时出现在屏幕上。我知道页面成功获得了一个随机的 img src，但物理图像从未出现。我需要在我的 html 中引用它吗？我将如何获取该随机图像 src 以制作可见图像。

<!DOCTYPE html>
<html>
    <head>
        <title>Hiragana Flash Cards</title>
    </head>
    <body>
        <h2>Hiragana Flash Cards</h2>
        <script>
            var imgArray = new Array();
            imgArray[0] = new Image();
            imgArray[0].src = 'a.png';
            imgArray[1] = new Image();
            imgArray[1].src = 'i.png';
            imgArray[2] = new Image();
            imgArray[2].src = 'u.png';
            imgArray[3] = new Image();
            imgArray[3].src = 'e.png';
            imgArray[4] = new Image();
            imgArray[4].src = 'o.png';
            imgArray[5] = new Image();
            imgArray[5].src = 'ka.png';

            function imgRandom(imgArr) {
                return imgArr[Math.floor(Math.random() * imgArr.length)];
                }
            console.log(imgRandom(imgArray)); 
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript arrays image

【解决方案1】：

可以修改img标签的src变量，设置为图片URL。

片段

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'blue.png';
imgArray[1] = new Image();
imgArray[1].src = 'green.png';

function imgRandom(imgArr) {
  return imgArr[Math.floor(Math.random() * imgArr.length)];
}

document.getElementById("random").src = imgRandom(imgArray).src;
console.log(imgRandom(imgArray));

<!DOCTYPE html>
<html>
    <head>
        <title>Hiragana Flash Cards</title>
    </head>
    <body>
        <h2>Hiragana Flash Cards</h2>
        <img id="random">
    </body>
</html>

短版

document.getElementById("random").src = imgRandom(imgArray).src;

【讨论】：

【解决方案2】：

像这样将它附加到正文中

document.body.append(imgRandom(imgArray));

【讨论】：

【解决方案3】：

您需要将图像追加到文档中：

 var imgArray = new Array();
            imgArray[0] = new Image();
            imgArray[0].src = 'a.png';
            imgArray[1] = new Image();
            imgArray[1].src = 'i.png';
            imgArray[2] = new Image();
            imgArray[2].src = 'u.png';
            imgArray[3] = new Image();
            imgArray[3].src = 'e.png';
            imgArray[4] = new Image();
            imgArray[4].src = 'o.png';
            imgArray[5] = new Image();
            imgArray[5].src = 'ka.png';

            function imgRandom(imgArr) {
                return imgArr[Math.floor(Math.random() * imgArr.length)];
                }
            var randomImage = imgRandom(imgArray); //Create the image
            document.getElementById('container').appendChild(randomImage); // Append the image

<!DOCTYPE html>
<html>
    <head>
        <title>Hiragana Flash Cards</title>
    </head>
    <body>
        <h2>Hiragana Flash Cards</h2>
        <!--You can place the image here -->
        <div id="container"></div>
    </body>
</html>

查看appendChild() 文档

【讨论】：