图片不显示首要检查img标签是否缺失src属性，缺则完全不渲染；其次查src路径是否正确，需确保相对路径以HTML文件位置为基准、大小写一致、扩展名完整，并用Network面板验证请求状态。
检查 img 标签的 src 是否写对了
很多“图片不显示”根本不是路径问题，而是标签本身漏了关键内容。浏览器遇到 <img alt="HTML商品详情页图片不显示怎么办？路径检查教程" > 时，src 是强制属性，缺了就完全不渲染（连占位框都没有），也不报错。
常见错误包括：
-
src写成scr或href -
src值为空、只有文件名没扩展名（如src="banner"而非src="banner.jpg"） - 用了
<image></image>这种错误标签，或写了<img src="..." alt="HTML商品详情页图片不显示怎么办？路径检查教程" >（<img alt="HTML商品详情页图片不显示怎么办？路径检查教程" >是自闭合标签，不能有结束标签） - 忘了加引号，比如
src=images/logo.png（解析失败，多数浏览器会忽略）
确认相对路径是否相对于 HTML 文件位置
img 的 src 永远按当前 HTML 文件所在目录解析，不是按 JS/CSS 文件位置，也不是按服务器根目录。商品页常放在子目录（如 /product/iphone15.html），容易多写或少写 ../。
举例说明：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- HTML 在
/product/detail.html，图片在/images/banner.jpg→ 应写src="../../images/banner.jpg" - HTML 和图片都在
/product/下 → 直接写src="banner.jpg"，不用./ - Windows 本地路径用
\分隔？HTML 里一律用/，哪怕你双击打开file://协议页面 - 大小写必须完全一致：服务器（尤其是 Linux）上
Logo.png≠logo.PNG
用浏览器 Network 面板看真实请求状态
别靠“看起来像对的”判断，右键图片 → “检查”，切到 Network 面板，刷新页面，找对应图片请求。关键看状态码：
-
404 Not Found：路径错了，或文件根本没上传到对应位置 -
403 Forbidden：服务器拒绝访问该目录（比如图片放在/src/或/node_modules/下） -
200 OK但图片还是空白：可能是图片损坏、MIME 类型返回错（如服务器把.png当作text/plain返回）、或跨域（CORS 报错在 Console 里） - 鼠标悬停在
src值上，Chrome 会显示它实际解析出的完整 URL，点一下就能跳转验证是否可访问
绕过 file:// 协议限制直接起服务
本地双击打开 HTML 时，浏览器出于安全策略，常禁止加载同目录下的图片资源（尤其当图片在 _files 子目录时）。这不是代码问题，是环境限制。
临时解决方法（无需改代码）：
- 装
http-server：npm install -g http-server，然后进项目目录运行http-server - VS Code 安装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”
- Python 用户可快速起服务：
python3 -m http.server 8000（Python 3） - 注意：不要用绝对路径
file:///C:/...测试，它和http://localhost行为完全不同
路径本身不难，但商品页常涉及多层嵌套、CMS 自动生成、CDN 路径替换等场景，最容易被忽略的是：开发者工具里看到的“已加载”可能只是缓存响应，清缓存再试；以及 Word 导出的 HTML 附带的 _files 文件夹名必须和 HTML 中 src 引用的完全一致——差一个下划线或大小写，就 404。
