HTML img标签在子子文件夹中src路径失效问题求助

算力阿峰

2026-5-21

解决二级子文件夹图片无法显示的问题

嘿，我来帮你排查这个困扰！你提到liverIcon能正常显示，但lungIcon不行，而且编辑器还能自动补全路径，说明本地文件结构是对的，大概率是浏览器或服务器层面的路径/文件问题，给你几个具体的排查方向：

检查大小写一致性：编辑器通常不区分文件名/文件夹名的大小写，但浏览器（尤其是在非Windows系统下）是严格区分的。确认你的子文件夹确实是小写的red，SVG文件名001-medical.svg的拼写、大小写和实际文件完全一致——比如别实际是001-Medical.svg但你写了小写。
直接验证SVG文件可访问性：打开浏览器，在地址栏输入这个SVG的完整访问路径（比如如果你的HTML在项目根目录，WebStorm的内置服务器端口是63342，那路径就是http://localhost:63342/你的项目名/icon/red/001-medical.svg），看看能不能直接打开这个SVG。如果打不开，说明要么文件损坏，要么文件夹/文件的权限有问题。
检查文件权限：右键点击red文件夹，查看它的权限设置，确保它和icon文件夹的权限一致，服务器进程有读取这个文件夹内文件的权限。有时候本地文件夹的权限设置会导致服务器无法访问子目录里的文件。
强制清除浏览器缓存：浏览器可能缓存了之前加载失败的请求，导致即使路径正确也不重新加载。按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后再测试。
确认WebStorm服务器根目录：检查WebStorm的运行配置，确保服务器的根目录指向你的项目根目录。如果服务器根目录设置不对，相对路径的解析就会出错——不过因为icon根目录下的图片能显示，这个可能性相对小，但可以排查一下。