如何將javascript變量添加到HTML圖像src標記

Question

我知道這個答案在這里，但我一直無法找到它（或者至少在我看到它時就認出來了！）。 我是jquery的親戚，所以請耐心等待。

問題：

我有20張圖片，名為1.png到20.png 。 我想在每次用戶點擊按鈕時隨機顯示不同的圖像。

什么工作：

我生成隨機數的javascript代碼如下所示：

var randomImage = 1 + Math.floor(Math.random() * 20);

什么不是......

我想要做的是將結果傳遞給我的HTML文檔作為圖像的名稱，所以這是這樣的：

 <img id="randImg" class="img_answer" src="randomImage.png">

我嘗試連接，但似乎無法解決這個問題。 我是否需要創建一個影響img ID或類的函數？ 誰能指出我最干凈的方法呢？

Answer 1

var randomImage = 1 + Math.floor(Math.random() * 20);    
var imgName = randomImage+".png";
$("#randImg").attr("src",imgName);

演示： http ： //jsfiddle.net/a9Ltw/

Answer 2

拼寫一下以幫助教導：

在您的頁面上，您將擁有以下內容：

<img id=randomImage />

並且可能在頭部隱藏圖像，直到你選擇一個加載，這：

<style>
#randomImage {
    width: 400px; height: 200px; /* or whatever the dimensions are */
    visibility: hidden;
}
</style>

然后在你的Javascript中：

var ordinal = 1 + Math.floor(Math.random() * 20);
$('#randomImage').css('visibility', 'visible').attr('src', ordinal + '.png');

所以HTML列出了img標簽，一些早期的CSS設置它的尺寸並隱藏它，所以在某些瀏覽器中沒有丑陋的破碎圖像圖標等 - 只是一個空白區域。

然后最終Javascript加載並運行，確定隨機序數。 第二行Javascript調用jquery使img可見並將其src屬性設置為隨機圖像。

Answer 3

$(document).ready(function() {
    var randomImage = 1 + Math.floor(Math.random() * 20),    
                img = randomImage + ".png";

    $("#randImg").attr("src", img);
});

Answer 4

只需將一些默認圖像添加到img標簽，以防止在用戶禁用JavaScript時顯示任何內容，然后在jQuery中使用$("#randImg").attr("src", randomImage + ".png");

Answer 5

var thesoruce = "http://localhost:8080/content/dam/admin/" + id ;

 g_fb.find('p').append('<img src= '+thesoruce +'  height="250px" width="600px">');