JS获取图像src

在前端开发中，我们经常需要获取图片的src信息。这个过程虽然看似简单，但是有很多细节需要注意。在本文中，我们将会介绍如何通过JS获取图像src的方法，以及一些额外的注意点。

方法一：使用getElementById方法

我们可以通过getElementById方法获取img标签，并通过其src属性获取图片链接。下面是一个例子：

let img = document.getElementById('myImage');
let imgSrc = img.src;
console.log(imgSrc);

注：需要将其中的'myImage'替换成自己图片所在的id。

方法二：使用event.target

如果我们需要动态获取点击事件触发的图片src，我们可以使用event.target获取目标元素，并通过其src属性获取图片链接。下面是一个例子：

function handleClick(event) {
  let imgSrc = event.target.src;
  console.log(imgSrc);
}

在监听图片点击事件时，我们可以将handleClick函数传入addEventListener方法中。

注意事项

• 图片链接可能被浏览器缓存，若需要获取最新的图片链接，可以在获取src前重新加载图片。

img.onload = function() {
  let imgSrc = img.src;
  console.log(imgSrc);
}
img.src = img.src + '?' + new Date().getTime();

• 当图片加载失败时（例如404错误），img的src属性会变成显示的错误图片链接（可能是占位符图片），因此需要判断img的naturalWidth属性是否为0来判断是否加载成功。

if (img.naturalWidth === 0) {
  console.log('图片加载失败！')
} else {
  let imgSrc = img.src;
  console.log(imgSrc);
}

总结

通过以上两种方法，我们可以轻松地获取图片的src信息。除此之外，还需要注意浏览器缓存和错误图片链接的问题。好的图像展示是前端开发中不可或缺的一部分，希望这篇文章能够帮助到读者们。