如何使用JavaScript將圖像src轉換為HTML？

Question

我想將圖像src放入我的代碼中。 到目前為止，這是我的JavaScript代碼：

<script>
    function images(){
        var randomizer = Math.floor((Math.random() * 5)
        var pictures =["images1.jpg","images2","images3.jpg","images4.png","images5.jpg"]
    }
</script>

這是我的HTML代碼：

<img  id = "bubbles" src="images1.jpg" width="20%" alt = "pics">
<img id = "bubbles2" src="images2.jpg" width="20%" alt= "pics">

我面臨的問題是我無法將數組字符串放入src中。

Answer 1

問題在於圖像標簽的src屬性不能接受圖像數組。 您需要為照片添加單獨的圖像標簽。

var pictures = ["images1.jpg", "images2", "images3.jpg", "images4.png", "images5.jpg"];

for (var i = 0; i < pictures.length; i++) {
    var imgEl = document.getElementById("bubbles");
    imgEl.setAttribute("src", imEl[i]);
}

上面的代碼將使用數組中的圖像更新src屬性。 但是，這可能會很快，您只會看到最后一個。 您將需要弄清楚一種計時機制或集成您的隨機數功能以選擇一個隨機圖像。

使用Math.random（）

var pictures = ["images1.jpg", "images2", "images3.jpg", "images4.png", "images5.jpg"];
var randomizer = Math.floor(Math.random() * 5);
var imgEl = document.getElementById("bubbles");
imgEl.setAttribute("src", imEl[randomizer]);