怎么在网页源代码中找到图片

打开一个网页，网页按下F12，源代切到“元素”面板，码中你会看到一堆密密麻麻的图片标签——div套div，span挤span，网页像一锅煮糊了的源代面条。图片就藏在这锅面条里，码中但找起来没那么直接。图片

最笨也最靠谱的网页办法，是源代直接搜“img”。在开发者工具里按Ctrl+F（Mac上是码中Cmd+F），输入“img”，图片回车。网页浏览器会帮你高亮所有图片标签。源代每个img标签至少带一个src属性，码中那里面就是图片的地址。比如<img src="https://example.com/cat.jpg">，把src后面的URL复制到新标签页打开，看到的要么是图，要么是404。后者说明服务器不想让你看，或者图片被防盗链拦了。

但现实比这脏。很多网站不直接给图片路径，而是用CSS背景图。这种图不在img标签里，你得翻样式。找到元素后看右侧的“样式”面板，找background-image属性。我见过一个电商网站，商品图全部用背景图实现，src里只有一个1像素的透明占位符——这种坑踩过一次你就记住了。

还有更狡猾的。有些图片被base64编码直接塞进src里，长这样：data:image/jpeg;base64,/9j/4AAQSkZJRg...，一长串乱码。这种图没有独立URL，你没法直接下载，但可以右键另存为，或者用在线解码工具还原。说实话，这种编码方式让源代码变得极难阅读，但它的好处是减少HTTP请求，所以很多小图标喜欢这么干。

如果你要找的图片是懒加载的——现在大部分网站都这么干——那初始源代码里根本找不到img标签，或者src是空的。你得往下滚动页面，让图片真正加载出来，再回开发者工具看。这时候src里才会出现真实地址。有些站点用data-src或data-original存真实路径，img标签本身只留个占位符。这种设计是为了性能，但对扒图的人来说，你得先“骗”页面加载完。

我个人最讨厌的是那种动态生成的图片，比如Canvas画出来的图表。源代码里什么都没有，只有个<canvas>标签。你得去翻JavaScript文件，找到绘图逻辑，然后可能还得自己执行一段脚本才能拿到图。遇到这种情况，我通常直接放弃——不值得为一张图花半小时。

最后提醒一句：别光看src，还要看alt属性。有些图片地址写在srcset里，那是响应式图片的写法，同一个图有几个不同分辨率的版本，浏览器按屏幕宽度选一个。你要下载原图，得挑最大的那个，通常最后一个。还有，图片可能是WebP格式，后缀是.webp，别以为那是病毒，Chrome和Firefox都支持，只是有些老软件打不开。

找图这事，本质上是跟网页开发者玩捉迷藏。他们用各种手段优化性能、防爬虫，你就要见招拆招。熟练之后，你会发现大多数图片路径都是可以猜的——很多站点按日期或ID组织图片目录，比如/uploads/2024/05/12345.jpg。知道这个规律，有时候连源代码都不用看，直接拼URL就能拿到图。但这属于野路子，不保证每次都好使。

本文地址：http://www.79wt.cn/news/816e1299171.html