使用jQuery获取图片src属性遇到问题求助

数据老陈

2026-5-22

解决jQuery获取图片实际URL而非占位base64的问题

嘿，我之前做项目时也遇到过一模一样的情况！你拿到的这个base64字符串其实是个占位图，大概率是网站用了图片懒加载机制——为了提升页面加载速度，一开始不给img标签的src放真实图片地址，而是用这个极小的base64图占位，等图片需要显示时（比如滚动到可视区域），再把真实URL替换到src里，或者真实URL本来就存在其他自定义属性中。

给你几个可行的解决步骤：

第一步：确认真实URL存在哪个属性里
打开浏览器开发者工具（按F12），选中目标图片元素，查看它的HTML属性。通常懒加载的图片会把真实URL存在类似data-src、data-original、data-lazy这类自定义属性里，你仔细找一下就能看到。
第二步：用jQuery获取对应属性的值
比如你发现真实URL存在data-src里，那直接修改代码为：
```
$('img.thumbnail-img').attr("data-src")
```
如果是data-original，就改成：
```
$('img.thumbnail-img').attr("data-original")
```

特殊情况处理：动态加载的图片
如果图片是滚动到页面才加载真实URL的，那你需要确保在图片加载完成后再获取。可以监听页面加载完成事件，或者监听图片的加载事件：

// 页面所有资源加载完成后执行
$(window).on('load', function() {
  const realSrc = $('img.thumbnail-img').attr("src"); // 此时src已经被替换成真实URL
  console.log(realSrc);
});

// 或者监听单个图片的加载事件
$('img.thumbnail-img').on('load', function() {
  const realSrc = $(this).attr("src");
  console.log(realSrc);
});