index.html图片正常显示,about-us.html图片不显示问题求助
以下是针对该问题的常见排查方向:
本地打开方式的路径问题:
若直接用浏览器打开本地文件(file://协议),根路径/images/...会指向磁盘根目录(如C:\images\...或/Users/xxx/images/...),而非项目文件夹内的images目录。index.html能正常加载是因为它在项目根目录,浏览器会相对当前文件寻址;但如果about-us.html在子目录(比如about/about-us.html),根路径就会失效。解决办法是改用相对路径:若about-us和index同层级,用./images/CFT-Logo cropped.png;若about-us在子文件夹,用../images/CFT-Logo cropped.png,或者启动本地服务器(如python -m http.server、Live Server插件)模拟网站根环境。服务器根目录配置验证:
若部署在服务器上,确认服务器的网站根目录是否指向项目根文件夹。如果根目录设置错误,/images/会指向错误位置,导致about-us页面加载失败。文件名与路径大小写检查:
部分服务器(如Linux、Apache)区分文件名大小写。确认实际图片文件名(包括空格、大小写)与代码完全一致,比如代码里是CFT-Logo cropped.png,实际文件不能是cft-logo cropped.png或CFT-LogoCropped.png。清除浏览器缓存:
浏览器可能缓存了about-us页面的错误资源请求,尝试按Ctrl+Shift+R(Windows)或Cmd+Shift+R(Mac)强制刷新页面,重新加载图片资源。图片文件权限检查:
若部署在服务器上,确认images文件夹和图片文件的权限设置正确,服务器进程拥有读取该文件的权限。
内容的提问来源于stack exchange,提问作者Moomins

