使用JavaScript设置动态Img src

Question

我对JavaScript非常陌生。 并感谢我能对此提供的任何帮助。 我正在尝试创建一个动态获取imgsrc并显示登录用户图像的脚本。

例如： https://sampleimage.com/?uid=user1 ： 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"/>

Answer 1

该脚本将在加载图片标签之前运行。 您可以将代码包装在window.onload = function() { ... } ，也可以将script标签放在image标签之后。

Answer 2

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

您需要在userid插入用户的ID，否则您将只查询字符串userid 。 所以：

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

Answer 3

您要设置图像的图像持有人没有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