查看网页源代码怎么定位图片地址

浏览器里按下 F12 或右键“检查”，网页位图比右键“查看网页源代码”更直接。源代前者打开的码定是开发者工具，后者打开的片地是原始 HTML 文档，两者都能找到图片地址，网页位图但效率差很多。源代我平时优先用 F12，码定因为鼠标悬停在某个 <img> 标签上时，片地页面上对应的网页位图图片会高亮，定位速度极快。源代

原始 HTML 里找图片，码定最笨也最可靠的片地办法是 Ctrl+F 搜 <img。搜出来的网页位图每一行通常长这样：<img src="https://example.com/photo.jpg" alt="...">。这里的源代 src 属性就是图片地址。但问题在于，码定很多网站会把图片地址写在 data-src、data-original 或者 srcset 里，真正的 src 可能是一张 1x1 的占位图。我见过一个电商页面，搜 <img 出来四十多个结果，其中三十多个的 src 都是 data:image/gif;base64,R0lGOD...，真正的商品图藏在 data-src 后面。这种情况直接看原始代码容易漏掉。

开发者工具的优势这时候就出来了。切到 Elements 面板，点左上角那个箭头图标，再去点页面上的图片，代码会自动定位到对应的 <img> 元素。右边 Styles 面板下方有个 Computed 标签，里面有一项 background-image 或者 content，如果是 CSS 背景图，地址就写在那里。我帮同事找过一个轮播图的地址，原始 HTML 里只有 <div class="slide">，图片全在 CSS 的 background-image: url(...) 里，搜 <img 根本搜不到。

还有一种情况是图片被 JavaScript 动态插入。页面加载完，你右键查看源代码，看到的 HTML 是空的，因为 DOM 还没被脚本改写。这时候只能靠 F12 的 Elements 面板，它显示的是当前 DOM 的实时状态。Network 面板也能用，刷新页面后筛选 Img 类型，所有加载过的图片请求都会列出来，点开任意一条，Headers 里的 Request URL 就是完整地址。这个方法对付懒加载图片特别管用，你滚动页面时新加载的图片会一条条冒出来。

找到地址之后，想下载的话，右键图片选“在新标签页中打开”最省事。地址栏里就是最终 URL，去掉可能存在的 ?x-oss-process=... 之类的参数，通常能拿到原图。我试过某图库网站，缩略图地址带 ?imageView2/1/w/200，把问号后面全删掉，原图直接出来，尺寸从 200px 变成 2000px。

说个实际踩过的坑。有次找一个背景图，F12 里看到 background-image: url("data:image/svg+xml,...")，地址是一长串编码。这种不是外链图片，是内嵌的 SVG 数据。想提取的话，把 data:image/svg+xml, 后面的内容复制出来，用在线 URL 解码工具转一下，才能看到真正的 SVG 代码。外链图片不会这样，只有内嵌资源才用 data URI。

另外，srcset 属性现在很常见。一行代码里可能写了三四个不同尺寸的图片地址，浏览器根据屏幕宽度选一个加载。你搜 <img 看到 srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"，想拿最大的就选 large.jpg。别直接复制 src，那个可能是最小的占位图。

总结一下我的习惯：先 F12 点选元素，看 src 和 srcset；没有就查 Computed 里的 background-image；再没有就开 Network 面板刷新页面筛 Img。原始源代码适合快速搜静态页面的 <img>，动态页面和 CSS 背景图还是开发者工具靠谱。多试几次，肌肉记忆就形成了，比背什么口诀都强。