使用jQuery获取图片src时返回undefined，求解决方案

哥们，先揪出你问题里的一个小拼写错误——你写的scr其实应该是src，这大概率是第一个踩坑点！不过就算拼写纠正后还是返回undefined，我帮你梳理几种常见场景和对应的解决办法：

• DOM未加载完成就执行代码
  浏览器还没把图片元素渲染出来，jQuery自然找不到目标元素。解决办法很简单，把获取src的代码放在DOM加载完成的回调里：

  $(document).ready(function() {
    var imgSrc = $('img').attr('src');
    console.log(imgSrc);
  });
  

  或者用更简洁的 shorthand 写法：

  $(function() {
    var imgSrc = $('img').attr('src');
    console.log(imgSrc);
  });
  

• 选择器没匹配到目标图片
  检查你的选择器是否准确，比如图片有专属的class或id，你却用了全局的$('img')。举个例子，如果图片的id是user-avatar，应该这么写：

  var imgSrc = $('#user-avatar').attr('src');
  

  不确定是否选中元素的话，可以先打印匹配数量验证：

  console.log($('img').length); // 输出0就说明完全没选中元素
  

• 图片是动态生成的（比如AJAX加载后添加）
  如果图片是页面初始加载后，通过JS动态插入到DOM里的，那普通的DOM就绪代码也抓不到它。这时候要么在动态添加图片的代码之后立即获取src，要么用事件委托监听元素加载：

  // 示例：动态添加图片后立即获取
  $('body').append('<img src="profile.jpg" class="dynamic-img">');
  var dynamicSrc = $('.dynamic-img').attr('src');
  console.log(dynamicSrc);
  

• 尝试用prop()替代attr()
  虽然attr()是获取HTML属性的标准方法，但某些情况下，获取DOM元素的原生属性可以试试prop()方法（src属性用这个也能生效）：

  var imgSrc = $('img').prop('src');
  

内容的提问来源于stack exchange，提问作者amit munde