使用JavaScript設置動態圖片src

我對JavaScript非常陌生。並希望能得到任何幫助。我正在嘗試創建一個動態採用imgsrc的腳本，併爲登錄用戶顯示圖像。使用JavaScript設置動態圖片src

例如：https://sampleimage.com/?uid=user1
https://sampleimage.com/?uid=user2
https://sampleimage.com/?uid=user3
https://sampleimage.com/?uid=user4

我設法想出下面，但它不工作。我在這裏錯過了什麼？

<script type="text/javascript"> 
     var imgsrc = "https://sampleimage.com/?uid=userid" 
     document.getElementById('img-circle').setAttribute('src', imgsrc); 
</script> 

<img alt="Badge Photo" class="img-circle" src="empty.jpg" title="crakesh" height="40" width="38"/>

來源

2017-08-03 rakesh

你的代碼運行的元素存在之前，你設置'IMG-circle'是class not the id，所以getElementById在這種情況下不起作用 –

在JavaScript中是否有相當於getElementById的類。我試過「getElementsbyClassName」，但它不起作用 – rakesh

，你試圖設置圖像您的圖片持有人沒有img-circle ID。您可以使用該類來選擇元素並設置圖像。

<img alt="Badge Photo" class="img-circle" src="empty.jpg" title="crakesh" height="40" width="38"/> 
<script type="text/javascript"> 
    var imgsrc = "https://sampleimage.com/?uid=userid" 
    document.querySelector('.img-circle').setAttribute('src', imgsrc); 
</script>

或者你可以添加ID到您的img元素

<img alt="Badge Photo" id="img-circle" class="img-circle" src="empty.jpg" title="crakesh" height="40" width="38"/>

但是如果你有多個圖像元素然後有對多個元素相同的ID將無法正常工作。還要確保您添加腳本之前然後結束</body>標籤或包裝你的代碼window.onload = function(){} 瞭解更多關於在window.onload https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

來源

2017-08-03 19:32:50 azs06

該腳本將在圖像標記加載之前運行。您可以將代碼包裝在window.onload = function() { ... }中，也可以將腳本標籤放在圖像標籤之後。

來源

2017-08-03 19:11:59 csander

我使用img-circle作爲類而不是id，所以getElementById不起作用。我仍然試圖使它與班級而不是id – rakesh

"https://sampleimage.com/?uid=userid"

你需要插入用戶的ID在userid，否則你將只是查詢字符串userid。所以：

https://sampleimage.com/?uid=" + userID

來源

2017-08-03 19:12:48

感謝您的答覆。鏈接只是一個例子，並不是實際的問題。這個問題在下面討論 – rakesh

使用JavaScript設置動態圖片src

回答

相關問題