HTML商品详情页图片不显示怎么办？路径检查教程-html教程-PHP中文网

图片不显示首要检查img标签是否缺失src属性，缺则完全不渲染；其次查src路径是否正确，需确保相对路径以HTML文件位置为基准、大小写一致、扩展名完整，并用Network面板验证请求状态。

html商品详情页图片不显示怎么办？路径检查教程

检查 `img` 标签的 `src` 是否写对了

很多“图片不显示”根本不是路径问题，而是标签本身漏了关键内容。浏览器遇到时，src 是强制属性，缺了就完全不渲染（连占位框都没有），也不报错。

常见错误包括：

src 写成 scr 或 href
src 值为空、只有文件名没扩展名（如 src="banner" 而非 src="banner.jpg"）
用了这种错误标签，或写了（是自闭合标签，不能有结束标签）
忘了加引号，比如 src=images/logo.png（解析失败，多数浏览器会忽略）

确认相对路径是否相对于 HTML 文件位置

img 的 src 永远按当前 HTML 文件所在目录解析，不是按 JS/CSS 文件位置，也不是按服务器根目录。商品页常放在子目录（如 /product/iphone15.html），容易多写或少写 ../。

举例说明：

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 面板，刷新页面，找对应图片请求。关键看状态码：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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。