刚把代码敲完，满怀期待地双击打开本地HTML文件，结果映入眼帘的是一片空白，或者是一个个破碎的红叉图标。那一刻的心凉，只有做过前端的人懂。别急着骂娘，这大概率不是你的代码写错了，而是路径问题。今天不整虚的，直接拆解“自己做的网站 打开了没有图片”这个经典坑位，带你从根源解决它。
先说最扎心的真相：90%的新手都栽在相对路径和绝对路径的混淆上。你以为图片就在旁边，浏览器却觉得它在地球另一端。
第一步，检查图片路径格式。很多教程让你写 
assets，你得写 
../ 回溯。这里有个极易忽略的细节：Windows和Mac对大小写不敏感，但Linux服务器（也就是你最终部署的地方）是严格区分大小写的。Image.jpg 和 image.jpg 在本地能跑，上传到服务器直接404。所以，养成全小写、无空格的命名习惯，能省掉一半的调试时间。
第二步，排查资源加载协议。如果你用了本地开发服务器（如VS Code的Live Server），一切正常。但如果你直接双击打开文件，浏览器会读取 file:// 协议。这时候，如果图片路径里混入了绝对路径，比如 C:/Users/Pic.jpg，浏览器出于安全限制，通常会拒绝加载，导致“自己做的网站 打开了没有图片”的现象。解决方案很简单：要么把图片放在项目根目录下，要么务必使用相对路径，并且确保路径引用正确。
第三步，检查图片格式与编码。别笑，真有人把 .png 后缀改成 .jpg 强行引用。浏览器识别的是文件头信息，不是后缀名。如果你用PS导出图片，记得勾选“转换为sRGB”，否则在部分浏览器上颜色会发灰甚至显示不出来。另外，确保图片文件没有被损坏，用系统自带的画图软件打开试一下，打不开就是文件坏了，重新保存即可。
这里分享一个真实案例。上周帮朋友调优，他的网站在本地完美运行，上线后全图裂开。排查发现，他在代码里用了绝对路径 /images/logo.png，而服务器根目录并没有这个文件夹。他以为 src 里的斜杠代表项目根目录，其实它代表的是网站域名的根目录。这种“自己做的网站 打开了没有图片”的坑，在团队协作中更是高发区。
为了避坑，我强烈建议大家在开发阶段就引入构建工具，比如Vite或Webpack。它们会自动处理资源路径，还能压缩图片。手动写路径不仅累，还容易出错。如果你还在用纯HTML/CSS硬扛，那至少要把图片资源统一管理到一个文件夹里，比如 img 或 assets，然后在CSS和HTML中统一引用。
最后，给个调试小技巧。在浏览器按F12打开开发者工具，切换到Network（网络）标签页，刷新页面。如果图片请求状态是404，点击它看Request URL。复制那个URL，在浏览器新标签页打开，如果也打不开，说明路径确实错了。如果打开了，那就是CSS样式把图片隐藏了，比如 display: none 或 visibility: hidden，或者宽高设为0。
记住，前端开发就是和细节死磕的过程。每一个破碎的图标背后，都是一次对路径逻辑的重新审视。别怕报错，报错是浏览器在告诉你它在哪迷路了。按照上面的步骤一步步排查，你的网站一定能正常显示那些精心设计的图片。
本文关键词：自己做的网站 打开了没有图片
