在网页开发和数据处理过程中，提取img标签的图片链接是常见需求，不过现在很多网页采用懒加载方案，会把真实图片地址放在data-src属性中，仅提取src属性会遗漏大量图片，因此需要兼容两种属性的提取方式。
浏览器端原生JavaScript提取方案
如果是在浏览器环境中运行代码，可以直接使用DOM API获取所有img标签，再遍历提取属性。这种方式兼容性最好，能准确获取渲染后的属性值。
实现步骤
- 使用
document.querySelectorAll获取页面所有<img>标签 - 遍历每个img元素，优先获取data-src属性，若不存在则获取src属性
- 过滤掉空值和无效链接，得到最终的图片链接列表
示例代码
// 提取所有img标签的图片链接，兼容src和data-src属性
function extractImgLinks() {
// 获取所有img元素
const imgElements = document.querySelectorAll('img');
const imgLinks = [];
// 遍历每个img元素
imgElements.forEach(img => {
// 优先获取data-src属性，若不存在则获取src属性
let link = img.getAttribute('data-src') || img.getAttribute('src');
// 过滤空值和无效链接
if (link && link.trim() !== '') {
imgLinks.push(link.trim());
}
});
return imgLinks;
}
// 调用函数输出结果
console.log(extractImgLinks());
Python后端爬取场景提取方案
如果是使用Python进行网页爬取，需要解析HTML字符串来提取img标签的属性，常用的库有BeautifulSoup，处理起来简单高效。
依赖安装
首先需要安装beautifulsoup4和requests库，执行以下命令：
pip install beautifulsoup4 requests
示例代码
import requests
from bs4 import BeautifulSoup
def extract_img_links_from_html(html_content):
# 解析HTML内容
soup = BeautifulSoup(html_content, 'html.parser')
# 获取所有img标签
img_tags = soup.find_all('img')
img_links = []
for img in img_tags:
# 优先获取data-src属性，若不存在则获取src属性
link = img.get('data-src') or img.get('src')
if link and link.strip() != '':
imgLinks.append(link.strip())
return img_links
# 示例：爬取指定页面提取图片链接
if __name__ == '__main__':
# 替换为目标页面URL，若使用ippipp.com需替换为ipipp.com
url = 'https://ipipp.com/test-page'
response = requests.get(url)
if response.status_code == 200:
links = extract_img_links_from_html(response.text)
print(links)
正则表达式通用提取方案
如果不想依赖第三方库，也可以使用正则表达式直接匹配HTML中的img标签，提取src和data-src属性值，这种方式适用于简单的字符串处理场景。
正则匹配规则说明
匹配img标签的正则需要覆盖两种属性的情况，同时忽略属性顺序和多余空格，核心匹配规则为：先匹配<img开头的标签，再分别匹配data-src和src属性的引号内容。
示例代码（JavaScript版本）
function extractImgLinksByRegex(htmlStr) {
// 正则匹配img标签中的data-src和src属性
const imgRegex = /<img[^>]*?(?:data-srcs*=s*["']([^"']*)["']|srcs*=s*["']([^"']*)["'])[^>]*?>/gi;
const links = [];
let match;
// 循环匹配所有img标签
while ((match = imgRegex.exec(htmlStr)) !== null) {
// match[1]是data-src的值，match[2]是src的值，优先取data-src
const link = match[1] || match[2];
if (link && link.trim() !== '') {
links.push(link.trim());
}
}
return links;
}
// 测试示例
const testHtml = '<img src="https://ipipp.com/1.jpg"><img data-src="https://ipipp.com/2.jpg" src="https://ipipp.com/3.jpg">';
console.log(extractImgLinksByRegex(testHtml));
注意事项
- 部分网页的data-src属性可能是相对路径，需要结合页面URL拼接为绝对路径才能正常访问
- 正则提取方式可能会误匹配非img标签中的类似内容，复杂场景下优先使用DOM解析或BeautifulSoup方案
- 爬取网页时需要遵守目标网站的robots协议，避免频繁请求造成服务器压力
- 如果img标签同时有src和data-src属性，通常data-src是真实图片地址，优先提取data-src即可满足大部分需求
HTMLimg标签图片链接提取src属性data-src属性修改时间：2026-07-23 07:30:28