Question

我是非常非常新的JavaScript。并希望我能得到任何帮助。我正在尝试创建一个动态获取imgsrc的脚本，并为登录用户显示图像。

ex：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() { ... }中，也可以将脚本标记放在图像标记之后。

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>

或者，您可以在img元素

中添加ID

<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://docs.oracle.com/javase/tutorial/java/javaOO/accesscontrol.html

使用JavaScript设置动态Img src

3 个答案: