如何统一提取HTML中img标签的图片链接（兼容src与data-src属性）
在网页开发和数据抓取工作中，提取图片链接是一项非常基础但又经常遇到的需求。传统的做法是直接从img标签的src属性中获取图片地址，但如今越来越多的网站采用了懒加载技术来优化页面性能。懒加载的实现方式通常是将真实的图片地址放在data-src或其他自定义属性中，而src属性可能只是一个占位图或者空字符串。如果只提取src属性，就会漏掉大量真正需要抓取的图片。因此，掌握一种能够同时兼容src和data-src属性的提取方法，对于前端开发者、爬虫工程师乃至数据分析人员来说都是一项必备技能。
本文将从浏览器端原生JavaScript、Python后端爬取、正则表达式三个角度出发，详细讲解如何统一提取HTML中img标签的图片链接。每种方案都会给出完整的实现思路、代码示例以及注意事项，帮助你在不同场景下灵活选用。
一、浏览器端原生JavaScript提取方案
如果你是在浏览器环境中运行代码，比如在浏览器的开发者工具控制台中调试，或者在一个前端项目中需要收集当前页面的所有图片链接，那么使用原生的DOM API是最直接、最可靠的方式。这种方法直接操作渲染后的DOM树，能够准确获取到每个img标签的当前属性值，不受HTML字符串格式变化的影响。
1.1 实现思路
首先，我们需要获取页面中所有的img标签。在浏览器中，document.querySelectorAll('img')可以返回一个包含所有img元素的NodeList。然后，遍历这个列表，对每一个img元素，优先读取它的data-src属性，如果存在且不为空，就将其作为图片链接；如果data-src不存在，再回退到读取src属性。最后，将获取到的有效链接放入一个数组中返回。
为什么要优先读取data-src呢？因为在懒加载模式下，当图片还未进入可视区域时，src属性通常是一个很小的占位图或者透明的像素图，而data-src中存放的才是真正的图片地址。只有当用户滚动到图片附近时，JavaScript才会将data-src的值赋给src，从而触发加载。所以，如果我们想要获取页面中所有潜在的图片资源（包括尚未加载的），就必须优先考虑data-src。
1.2 完整代码示例
下面是一个可以直接在浏览器控制台中运行的函数：
function extractImgLinks() {
const imgElements = document.querySelectorAll('img');
const imgLinks = [];
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());这段代码简洁明了，适用于绝大多数浏览器环境。使用时，只需在目标页面的控制台中粘贴并执行，就能得到一个包含所有图片链接的数组。
1.3 注意事项与扩展
虽然上面的代码已经能满足大部分需求，但在实际应用中还有一些细节需要注意：
- 相对路径的处理：如果提取到的链接是相对路径（如
/images/photo.jpg），则需要结合当前页面的基地址拼接成完整的绝对URL。可以使用new URL(relativePath, window.location.href).href来实现。 - 重复链接的去重：如果同一个图片被多次引用，数组中会出现重复项。可以根据需要决定是否去重，例如使用
Set数据结构。 - svg、picture等标签：有些图片是通过
<picture>标签或<svg>中的<image>标签引入的，这部分不在img标签范围内，如果需要一并提取，则需要额外处理。
此外，如果你的页面中存在动态生成的img标签（比如通过JavaScript异步加载的），那么document.querySelectorAll只能捕获到执行那一刻已经存在于DOM中的元素。对于后续动态添加的元素，可以考虑使用MutationObserver来监听DOM变化。
二、Python后端爬取场景提取方案
当我们需要在后端程序中抓取远程网页的图片链接时，浏览器环境就不适用了。此时，我们通常会用Python编写爬虫，通过HTTP请求获取页面的HTML源码，然后从中解析出img标签。最常用的库是BeautifulSoup，它提供了非常人性化的API来处理HTML和XML文档。
2.1 环境准备
首先需要安装必要的Python库。打开终端，执行以下命令：
pip install beautifulsoup4 requestsrequests用于发送HTTP请求，获取网页内容。beautifulsoup4用于解析HTML，提取img标签及其属性。
2.2 实现思路
与浏览器端类似，我们需要从HTML字符串中找出所有img标签。BeautifulSoup的find_all('img')方法可以做到这一点。然后遍历每个img标签对象，调用.get()方法获取属性值。注意，get()方法的第一个参数是属性名，如果属性不存在则返回None。我们可以利用Python的逻辑运算符or来实现优先选择：img.get('data-src') or img.get('src')。
2.3 完整代码示例
下面是一个完整的Python脚本，演示如何爬取一个页面并提取所有图片链接：
import requests
from bs4 import BeautifulSoup
def extract_img_links_from_html(html_content):
"""从HTML字符串中提取所有img标签的图片链接（兼容src和data-src）"""
soup = BeautifulSoup(html_content, 'html.parser')
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():
img_links.append(link.strip())
return img_links
if __name__ == '__main__':
# 以ippipp.com为例，爬取其首页
url = 'https://www.ippipp.com'
try:
response = requests.get(url, timeout=10)
response.raise_for_status() # 检查请求是否成功
links = extract_img_links_from_html(response.text)
print(f"共找到 {len(links)} 张图片")
for l in links[:10]: # 只打印前10个
print(l)
except Exception as e:
print(f"请求失败：{e}")在这个例子中，我们请求了www.ippipp.com（注意：这是一个虚构的测试域名，实际使用时请替换为真实的目标网站）。脚本会输出找到的图片数量，并打印前10个链接。
2.4 进阶技巧与注意事项
- 处理相对路径：与浏览器端一样，爬虫中也需要将相对路径转为绝对路径。可以使用
urllib.parse.urljoin(base_url, relative_path)来实现，其中base_url是当前页面的URL。 - 处理懒加载的其他变种：有些网站可能会使用
data-lazy-src、data-original等自定义属性，甚至使用loading="lazy"配合src占位。为了提高鲁棒性，可以定义一个属性优先级列表，依次检查。 - 遵守robots协议：在进行大规模爬取之前，请务必检查目标网站的
robots.txt文件，尊重网站的爬取规则，并适当设置请求间隔，避免对服务器造成压力。 - 处理动态加载的内容：如果目标页面中的图片是通过JavaScript异步加载的，那么直接获取HTML源码可能无法拿到完整的图片列表。这种情况下，可以考虑使用Selenium或Playwright等无头浏览器工具，模拟真实浏览器行为后再提取。
三、正则表达式通用提取方案
在某些轻量级的场景下，我们可能不希望引入第三方库，或者需要在一个不支持DOM解析的环境中（比如某些脚本语言）快速提取图片链接。这时，正则表达式就成了一个不错的选择。正则表达式可以直接在HTML字符串中匹配img标签，并捕获src和data-src属性的值。
3.1 正则匹配规则说明
要匹配img标签中的src和data-src属性，我们需要构造一个既能匹配属性名又能匹配属性值的正则表达式。核心思路是：先匹配<img开头，然后匹配任意字符直到遇到属性名data-src或src，接着匹配等号和引号，最后捕获引号内的URL。
考虑到属性在标签内的顺序是不确定的，而且可能存在多个属性，我们可以使用分支结构(?:data-src\s*=\s*["']([^"']*)["']|src\s*=\s*["']([^"']*)["'])来同时匹配两种情况。注意，这里用了非捕获分组(?:...)，并将捕获组放在了引号内容上。
3.2 JavaScript版本正则示例
下面是一个在JavaScript中使用正则表达式提取图片链接的函数：
function extractImgLinksByRegex(htmlStr) {
// 匹配img标签中的data-src或src属性，忽略大小写
const imgRegex = /<img[^>]*?(?:data-src\s*=\s*["']([^"']*)["']|src\s*=\s*["']([^"']*)["'])[^>]*?>/gi;
const links = [];
let match;
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://www.ippipp.com/images/logo.png">
<img data-src="https://www.ippipp.com/images/banner.jpg" src="placeholder.jpg">
<img alt="no image">
`;
console.log(extractImgLinksByRegex(testHtml));
// 输出: ["https://www.ippipp.com/images/logo.png", "https://www.ippipp.com/images/banner.jpg"]这个正则表达式能够正确处理属性顺序颠倒、有多余空格等情况。但要注意，它只能匹配标准的双引号或单引号包裹的属性值，如果遇到无引号的值（如src=photo.jpg），则无法匹配。好在现代网页中几乎都使用引号，所以这个限制影响不大。
3.3 Python版本正则示例
Python中的正则表达式用法与JavaScript类似，只不过使用了re模块。下面是Python版本的实现：
import re
def extract_img_links_by_regex(html_str):
pattern = r'<img[^>]*?(?:data-src\s*=\s*["\']([^"\']*)["\']|src\s*=\s*["\']([^"\']*)["\'])[^>]*?>'
matches = re.findall(pattern, html_str, re.IGNORECASE)
links = []
for m in matches:
# m是一个元组，m[0]对应data-src，m[1]对应src
link = m[0] if m[0] else m[1]
if link and link.strip():
links.append(link.strip())
return links
# 测试
test_html = '''
<img src="https://www.ippipp.com/a.jpg">
<img data-src="https://www.ippipp.com/b.jpg" src="placeholder.gif">
'''
print(extract_img_links_by_regex(test_html))3.4 正则方案的优缺点
优点：
- 无需任何第三方库，纯字符串操作，执行速度快。
- 可以嵌入到各种编程语言中，移植性强。
- 适合处理简单的、结构规范的HTML片段。
缺点：
- 正则表达式难以处理复杂的嵌套标签和异常的HTML写法（如属性值中包含引号、标签跨行等）。
- 容易误匹配到注释中的img标签或JavaScript字符串中的img标签。
- 维护性较差，当需要增加对新属性的支持时，正则表达式会变得冗长。
因此，正则方案更适合在已知HTML格式较为规整、且对性能要求较高的场景下使用。对于复杂的真实网页，建议优先选择DOM解析或BeautifulSoup方案。
四、三种方案的对比与选型建议
为了帮助你更好地选择合适的方法，下表总结了三种方案的特点：
方案 | 适用环境 | 依赖 | 准确性 | 易用性 | 性能 |
|---|---|---|---|---|---|
浏览器端JavaScript | 浏览器控制台/前端 | 无 | 最高 | 很高 | 中等 |
Python BeautifulSoup | 后端爬虫/数据处理 | beautifulsoup4 | 高 | 高 | 中等 |
正则表达式 | 任何支持正则的环境 | 无 | 较低 | 较低 | 高 |
选型建议：
- 如果你正在浏览器中调试或开发前端功能，直接使用第一种方案，简单快捷。
- 如果你需要编写一个稳健的爬虫程序，推荐使用BeautifulSoup方案，它能够很好地处理各种畸形的HTML。
- 如果你只是在某个脚本中快速提取少量图片链接，且对HTML格式有信心，正则方案可以节省安装依赖的时间。
五、总结
提取img标签中的图片链接看似简单，但考虑到懒加载技术的普及，我们必须同时处理src和data-src属性。本文介绍了三种主流的实现方式：浏览器端DOM API、Python BeautifulSoup、以及正则表达式。每种方式都有其适用的场景和优缺点。在实际开发中，应根据具体需求、运行环境和可接受的复杂度来选择最合适的方案。希望这篇文章能帮助你轻松应对图片链接提取的各种挑战。
HTMLimg标签图片链接提取src属性data-src属性修改时间：2026-08-23 06:55:09