图片不显示主因是路径错误、标签书写不规范、本地文件协议限制、服务器配置问题及图片格式兼容性差；应优先检查控制台404错误、点击src链接验证、使用本地服务而非双击打开、确保alt属性存在且格式符合标准。
图片路径写错：相对路径和绝对路径混用最常导致 404
浏览器控制台报 Failed to load resource: the server responded with a status of 404 (Not Found)，八成是 src 值没对上真实文件位置。开发时习惯在编辑器里点开图片没问题，但 HTML 是由 Web 服务器（比如本地 http-server、VS Code Live Server，或生产 Nginx）按 URL 规则解析路径的，不是按文件系统双击打开的逻辑。
- 检查图片是否真在你写的路径下：比如
images/文件夹，且里面真有logo.png - 用浏览器右键「检查元素」，点击
src链接看是否跳转到空白页或 404 —— 这比猜快得多 - 避免用 Windows 风格反斜杠
\，一律用正斜杠/；路径开头不加./通常更稳，除非明确需要从当前目录出发 - 如果 HTML 在子目录（如
/pages/about.html），而图片在根目录/assets/icon.jpg，就写src="/assets/icon.jpg"（开头带/表示从域名根开始）
HTML 中 ![html语句的应用_html语句插入图片不显示常见原因【解答】]()
/> 或写成 alt 不是可选的“补充说明”，而是强制语义要求；没有 alt 可能导致图片不渲染（尤其在某些严格模式或辅助工具环境下）。
- 必须写成
/>也行（HTML5 允许），但绝不能写 -
alt值为空字符串alt=""是合法的，表示“该图纯装饰，无需描述”；但不能直接省略alt属性 - 不要用
style="display: none"或visibility: hidden隐藏图片后还指望它“加载”，它可能被浏览器跳过资源请求
服务器未配置 MIME 类型或静态资源未启用
本地双击打开 HTML 文件（file:// 协议）时，图片路径对了也可能不显示 —— 因为浏览器出于安全限制，会阻止跨源读取本地文件（比如从 C:/a.html 加载 C:/img/b.png 在新版 Chrome 中会被拒绝）。这不是代码错，而是运行环境问题。
- 双击打开 HTML 时，控制台若出现
Not allowed to load local resource，说明必须起一个本地服务，比如用npx http-server或 VS Code 的 Live Server 插件 - 若部署到 Nginx/Apache，确认服务器配置允许访问图片后缀：Nginx 要有类似
location ~* \.(jpg|jpeg|png|gif)$ { }的块，且没被deny all拦住 - 检查图片文件权限（Linux/macOS 下）：确保 Web 用户（如
www-data）有读取权限，ls -l assets/photo.jpg看是否可读
图片格式或编码不被浏览器支持，或文件实际已损坏
有些图片看似能双击打开，但其实是编辑器“强行兼容”——比如 CMYK 模式的 PNG、带非标准 ICC 配置的 JPG、WebP 格式在旧版 Safari 中未启用，都会导致
立即学习“前端免费学习笔记（深入）”；
- 用命令行快速验证：
file photo.jpg看输出是否含JPEG image data；或用identify -format "%m %r" photo.png（ImageMagick）检查色彩空间 - 优先用 RGB + sRGB 配置的 JPG/PNG；WebP 图片要确认目标浏览器支持（可用
caniuse webp查） - 把图片拖进新浏览器标签页，如果也打不开，基本确定是文件本身问题，不是 HTML 写法问题
- 生成图片时避免用 Sketch/Figma 直接导出“保留编辑信息”的 PNG，选“导出为位图”并勾选“压缩”
真正卡住人的往往不是语法，而是路径在服务器上下文中的实际解析结果、文件系统权限与浏览器安全策略之间的三层错位。调的时候先看控制台报什么错，再顺着链接点进去，比反复改 src 更省时间。
