最快最稳的图片提取方式是浏览器“另存为网页，完整”，生成html文件及配套资源文件夹，内含所有已加载的原始图片；css背景图、base64等需用开发者工具elements或network面板单独处理。
用浏览器“另存为网页”直接获取所有已加载图片
这是最快、最稳的提取方式，不依赖插件或脚本，本质是让浏览器自己把已渲染出的所有图片资源打包保存下来。
关键点在于：必须选对保存类型，且确保图片已全部加载完成。
- 在目标网页滚动到底部，触发懒加载图片（比如小红书、知乎、电商页的瀑布流）
- 按
Ctrl+S（Windows）或Cmd+S（macOS），弹出保存对话框 - 将“保存类型”明确设为
网页，完整（.html + 文件夹）—— 不能选“仅 HTML”，否则图片全丢 - 保存后，会生成一个
xxx.html文件和一个同名的xxx_files（或xxx_images）文件夹 - 直接打开该文件夹，里面就是所有已加载的
.jpg、.png、.gif、.svg等原始图片文件
注意：CSS 背景图、伪元素图片、data:image/ Base64 图不会出现在这个文件夹里，它们需要另外处理。
用开发者工具 Elements 面板手动定位 img 标签 src
适合只提取少数几张关键图，或验证某张图的真实地址。比右键另存更可靠，绕过前端禁用右键的限制。
操作路径很直接，但容易卡在“找不到 src”的环节——因为有些图根本不在 <img> 标签里。
- 在图片上右键 →
检查（或按F12后用左上角箭头点选） - Elements 面板中找到对应的
<img>标签，看src属性值是否为有效 URL - 如果
src是空的，或值为data:image/，要继续查data-src、data-lazy-src等常见懒加载属性 - 右键点击
src或data-src的值 →Open in new tab，确认能打开再保存
别盲目复制 src 就完事；很多网站用 CDN 域名、带参数的 URL（如 ?imageView2/2/w/300），这种链接可能只是缩略图，高清原图得去 Network 面板找。
用 Network 面板捕获真实图片请求 URL
当图片是 JS 动态插入、或通过 CSS background-image 加载时，<img> 标签里根本没它，Elements 面板就失效了。这时候 Network 面板才是真相所在。
它记录的是浏览器实际发出的 HTTP 请求，不管 HTML 结构怎么绕，只要图被加载了，就一定在这里出现。
- 按
F12打开开发者工具 → 切到Network标签页 - 点漏斗图标，在 Filter 输入
img，或从 Type 下拉菜单选Img - 按
F5刷新页面，等所有图片加载完成（面板里不再新增请求） - 全选列表中的图片项 → 右键 →
Copy → Copy URL，一次性拿到所有图片绝对地址
复制出来的链接通常是带完整域名的，可直接粘贴进下载工具（如 wget -i urls.txt），但要注意过滤掉 tracking pixel 类的无效图（比如含 pixel.gif、tracker、analytics 的 URL）。
用控制台一行脚本批量提取所有 img.src 和 data-src
如果你已经拿到 HTML 源码（比如用 Python requests 抓回来），又不想写完整解析器，控制台脚本就是最轻量的“半自动”方案。
它快，但只管 <img> 标签，不处理 CSS、JS、伪元素，也不做相对路径转绝对路径——这些得你后续补。
Array.from(document.querySelectorAll('img')).map(el => el.src || el.dataset.src || el.dataset.lazySrc).filter(Boolean)
执行后返回一个数组，包含所有非空的 src 和常见懒加载属性值。复制结果 → 粘贴到编辑器 → 手动或用正则清理格式即可。
真正麻烦的从来不是“怎么取”，而是“取出来之后怎么用”：URL 是相对路径？要不要去重？Base64 怎么解？哪些图其实只是占位符？这些细节一漏，批量下载就废一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
