通过 Javascript 查找图像的 src答案

【问题标题】：Finding the src of an image via Javascript通过 Javascript 查找图像的 src
【发布时间】：2015-09-08 10:10:41
【问题描述】：

我通过简单的 Google 搜索找到了我的问题的答案，但我遇到了一个小问题。

到目前为止，我的 HTML 页面上有一个 ID 为 newAvatar 的图像。我试图通过它的 ID 找到这个图像，并将它的源保存到一个变量中，然后最终保存到一个 XML 文档中以供以后使用。

当我将此源保存到一个变量中，或出于检查目的提醒它时，它会显示完整的源，这是不寻常的。例如，我在 WAMP 服务器上运行我的网站，因此变量保存为：

http://localhost/uploads/newUploadedImage.jpg

实际上，来源应该简单明了，uploads/newUploadedImage.jpg

图片标签是

<img src="uploads/newUploadedImage.jpg" width="60px" height="60px;" id="newAvatar"/>

我检查源的方式是

alert(document.getElementById('newAvatar').src);

知道如何摆脱第一批垃圾吗？

非常感谢所有帮助！

【问题讨论】：

能否在问题中包含 javascript 和 image 标签？
可能是this.getAttribute('src');，但如果没有上下文（您的 html 和 JavaScript），很难说或猜测。
@DavidThomas - 添加了您要求的信息。谢谢。

标签： javascript html image src

【解决方案1】：

通过使用@DavidThomas 之前的评论，我设法让它工作。这就是我将警报更改为：

alert(document.getElementById('newAvatar').getAttribute('src'));

【讨论】：

检查这在其他浏览器中是否有效 - 我认为旧版本的 IE 可能有问题。可能需要使用像 jQuery 这样的框架来确保更好的跨浏览器兼容性：$('#newAvatar').attr('src')

【解决方案2】：

var hostname = document.location.hostname;
var url = 'http://' + hostname + '/';

var src = document.getElementById('newAvatar').getAttribute('src'); //'uploads/newUploadedImage.jpg'
var image = src.split('/')[1];

console.log(url);
console.log(image);

【讨论】：

【解决方案3】：

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<img src="uploads/newUploadedImage.jpg" width="60px" height="60px;"
  id="newAvatar"/>

和

$(function()
{
    alert($('#newAvatar').attr('src'));
});

【讨论】：

@epascarello 在警报调用周围添加了就绪事件处理程序。