网页图片为什么不显示？用浏览器开发者工具 5 分钟找到问题

很多人遇到网页异常时，第一反应是刷新页面、清理缓存，或者换一个浏览器。其实，浏览器已经提供了一套免费的排查工具，不需要安装插件，也不需要具备专业开发经验。

一、打开浏览器开发者工具

开发者工具（Developer Tools，简称 DevTools）是 Chrome、Edge、Firefox 等现代浏览器内置的功能，可以查看网页结构、样式、网络请求和 JavaScript 错误。

打开方式很简单：

• Windows / Linux：按 F12 或 Ctrl + Shift + I。
• macOS：按 Command + Option + I。
• 也可以在网页上点击鼠标右键，选择“检查”或“检查元素”。

如果使用 Safari，需要先在 Safari 设置的“高级”中启用网页开发者功能，再从“开发”菜单打开 Web 检查器。

打开后，你会看到一个包含多个标签页的面板。初学者最值得掌握的是 Network、Console 和 Elements 三个功能。

二、用 Network 检查网页加载情况

Network（网络）面板可以记录网页加载时发出的请求，包括 HTML、图片、CSS、JavaScript 和接口数据。

操作步骤：

1. 打开需要检查的网页。
2. 按 F12，切换到 Network 标签。
3. 保持开发者工具打开，按 Ctrl + R 刷新页面。
4. 等待页面加载完成，查看请求列表。
5. 找到失败的请求，点击它查看详细信息。

这里有一个实用技巧：Network 面板顶部通常有类型筛选选项。如果图片没有显示，可以选择 Img，只查看图片请求；如果网页样式错乱，可以重点检查 CSS 请求。

点击某个请求，还能看到几个重要信息：

• Headers： 请求地址、请求方法和服务器返回的状态。
• Preview： 查看资源的预览内容。
• Response： 查看服务器实际返回的数据。
• Timing： 查看请求各阶段耗时。

这些信息能够帮助你判断问题究竟出在文件地址、服务器响应，还是加载过程上。

三、认识几个常见 HTTP 状态码

Network 列表中经常出现三位数字，它们是 HTTP 状态码，用来描述请求的处理结果。

初学者可以先记住一个简单规律：

• 2 开头通常表示请求成功。
• 3 开头通常表示需要重定向。
• 4 开头通常与客户端请求或访问权限有关。
• 5 开头通常表示服务器端出现问题。

注意，状态码并不能单独说明全部原因。例如，403 不一定代表密码错误，404 也可能是服务器有意隐藏某个资源。需要结合请求地址和响应内容判断。

四、用 Console 查看网页错误

如果网页可以正常打开，但按钮没有反应、某些功能无法使用，可以切换到 Console（控制台）。

这个面板主要用于显示 JavaScript 错误、警告和调试信息。

常见提示包括：

• Uncaught TypeError：程序尝试执行不合适的操作，例如访问不存在的对象属性。
• ReferenceError：代码引用了未定义的变量。
• Failed to load resource：某个资源加载失败。
• CORS error：跨域请求受到浏览器安全策略限制。

看到红色错误时，不要急着修改代码。先点击错误右侧的文件名和行号，查看错误发生的位置。如果是自己开发的网页，这通常是定位问题的重要线索。

还有一个小技巧：可以在 Console 中输入：

document.title

按回车，就能查看当前网页的标题。

也可以输入：

document.querySelector("h1")?.textContent

查看页面第一个一级标题的文字。如果结果是 null，可能是页面没有对应元素，也可能是内容尚未加载。

提醒：控制台可以执行网页脚本，不要随意粘贴陌生人提供的代码，尤其是要求你输入账号、密码或复制令牌的代码。

五、动手练习：找出图片不显示的原因

下面用一个简单例子练习 Network 面板。

可以按照下面的方法排查：

第一步： 打开网页，按 F12，进入 Network。

第二步： 选择 Img 筛选图片请求，然后刷新网页。

第三步： 找到 logo.png，查看 Status 一栏。

如果显示 404，说明服务器没有找到请求的资源。此时可以检查：

• 图片是否真的上传到了服务器。
• 文件夹名称是否正确，例如 image 和 images。
• 文件名大小写是否一致，例如 Logo.png 和 logo.png。
• HTML 中填写的路径是否与实际目录对应。

特别要注意，部分服务器使用区分大小写的文件系统。在本地电脑上正常显示的图片，部署到 Linux 服务器后可能因为大小写不同而无法加载。

第四步： 修正路径后重新刷新页面，再次检查请求状态。如果请求成功，通常会看到 200。

如果状态已经是 200，但图片依然没有正常显示，就继续检查 Response、图片格式以及 Elements 中的 CSS 样式，而不是简单地认为问题已经解决。

六、两个值得养成的好习惯

1. 先打开开发者工具，再刷新页面。 这样可以完整记录页面加载时的网络请求，减少遗漏。
2. 分享排查结果前注意隐私。 Network 请求详情和导出的 HAR 文件可能包含 Cookie、访问令牌、请求参数等敏感信息，不要未经检查就公开发送。

总结： 遇到网页异常时，不必盲目刷新或反复重装浏览器。先用 Network 查看请求，再用 Console 定位错误，配合 Elements 检查页面结构，就能解决很多常见问题。掌握这三个工具，你就拥有了一套随时可用的网页排查方法。