如何提取HTML中的图片_源码与资源抓取方法【技巧】

提取网页图片原始地址有五种方法:一、用浏览器开发者工具手动查img标签src;二、用正则匹配HTML中src属性;三、用BeautifulSoup解析DOM并处理data-src;四、用Selenium/Playwright处理JS动态加载;五、提取CSS background-image中的URL。

如果您需要从网页中提取图片,但不确定如何定位和获取图片的原始地址,则可能是由于HTML结构复杂或图片通过JavaScript动态加载。以下是提取HTML中图片源码与资源抓取的具体方法:

一、使用浏览器开发者工具手动提取

该方法适用于静态HTML页面,可直接查看DOM中标签的src属性值,快速定位原始图片地址。

1、在网页上右键选择“检查”或按F12打开开发者工具。

2、点击左上角的“选择元素”图标(箭头形状),然后将鼠标悬停在目标图片上。

3、在Elements面板中定位到对应的标签,找到src属性内容。

4、右键点击src属性值,选择“Open in new tab”验证图片可访问性。

5、复制src属性中的完整URL,该URL即为图片原始资源地址。

二、使用正则表达式匹配img标签src属性

该方法适用于已获取HTML字符串文本的场景,通过模式匹配快速提取所有图片链接,适合批量处理本地保存的HTML文件。

1、将HTML源码保存为纯文本文件或读入程序变量。

2、编写正则表达式:]+src=[\"']([^\"']*)[\"'][^>]*>。

3、对HTML文本执行全局匹配,捕获第一个捕获组中的内容。

4、对每个匹配结果进行URL规范化处理,将相对路径转换为绝对路径。

5、过滤掉data:image/开头的Base64编码图片(如需提取则另作处理)。

三、使用Python BeautifulSoup解析DOM结构

该方法基于HTML语法树解析,能准确识别嵌套结构与属性,避免正则误匹配,适用于含复杂class、script或noscript包裹的页面。

1、安装依赖:pip install beautifulsoup4 requests。

2、使用requests.get()获取网页响应内容,并指定response.encoding为'utf-8'。

3、用BeautifulSoup(response.text, 'html.parser')初始化解析器。

4、调用soup.find_all('img')获取全部img标签对象。

5、遍历结果,对每个tag获取tag.get('src')或tag.get('data-src')(适配懒加载)。

6、对非空且不以#开头的src值,用urllib.parse.urljoin(base_url, src)补全绝对路径。

四、处理JavaScript动态渲染图片

该方法针对Vue、React等框架生成的页面,或使用IntersectionObserver、lazyload库延迟加载的图片,其src或data-src初始为空或占位符。

1、使用Selenium或Playwright启动无头浏览器实例。

2、访问目标网页URL,并设置足够等待时间(如time.sleep(3))或显式等待图片容器出现。

3、执行JavaScript脚本:document.querySelectorAll('img').forEach(img => { if (img.hasAttribute('data-src')) img.src = img.getAttribute('data-src'); });。

4、再次调用get_attribute('src')获取已注入真实地址的img标签。

5、筛选出以http://、https://或//开头的有效URL,排除空白、javascript:void(0)等无效值。

五、提取CSS背景图片URL

该方法用于捕获通过background-image样式设置的图片,常见于轮播图容器、banner区域等未使用标签的视觉元素。

1、在开发者工具的Elements面板中选中疑似含背景图的元素。

2、切换至Styles面板,查找background-image属性值,如url("https://example.com/bg.jpg")。

3、使用正则\burl\([\'\"]?([^\'\")]+)[\'\"]?\)提取括号内地址。

4、若地址为相对路径,需结合当前页面URL进行拼接,注意去除url()外层括号及引号

5、对@import或CSS文件中引用的图片,需额外请求对应CSS资源并重复本流程解析。