使用Brackets与Bootstrap 4开发页面：预览正常但浏览器单图加载失败

嘿，我来帮你排查这个头疼的问题！这种Brackets里一切正常，但直接用Chrome/Firefox/IE打开就有图片挂掉的情况，我之前碰到过好几次，大概率是路径、编码或者浏览器缓存的小问题，咱们一步步来解决：

• 检查图片路径的大小写一致性
  Brackets的实时预览对文件名大小写可能比较宽容，但本地打开文件时，浏览器（尤其是Chrome）对路径大小写是严格区分的。比如你HTML里写的是img/rodape.png，但实际文件是img/Rodape.png，就会导致浏览器找不到文件。仔细核对出问题的图片文件名和HTML中的引用是否完全一致。

• 确认相对路径的层级是否正确
  Brackets会把你的项目根目录作为预览的基准路径，但直接打开HTML文件时，浏览器的基准路径是这个HTML文件所在的文件夹。举个例子：如果你的项目结构是根目录/assets/img/xxx.jpg，HTML在根目录/index.html，那路径assets/img/xxx.jpg没问题；但如果HTML在根目录/pages/index.html，你直接打开这个文件时，路径就得写成../assets/img/xxx.jpg才能找到图片。检查那张出问题的图片路径层级是不是错了。

• 避免文件名/路径中的特殊字符
  你的页面是葡萄牙语，说不定图片文件名或者路径里包含了葡语特殊字符（比如ç、ã、é、ô这些）。Brackets的预览功能可能能很好处理这些字符，但浏览器在加载本地文件时，对非ASCII字符的路径解析容易出问题。试试把那张图片重命名成纯英文+数字的简单名字（比如把logotipo_empresaçã.png改成company-footer-logo.png），同时更新HTML里的引用路径，再测试。

• 强制刷新浏览器缓存
  有时候浏览器会缓存旧的错误路径，哪怕你已经改对了，它还是会加载缓存里的错误内容。可以用快捷键Ctrl+Shift+R（Chrome/Firefox）强制刷新页面，或者直接清除浏览器的缓存后再打开页面。

• 排查图片文件本身是否损坏
  虽然Brackets能正常显示，但也不排除图片文件本身有损坏的可能。试试用系统自带的图片查看器或者PS这类编辑器打开那张图片，确认它能正常显示；或者复制一张确定没问题的图片替换它，再测试是否能加载。

小技巧：用浏览器开发者工具定位问题 #

直接在浏览器里右键点击页面选择「检查」，切换到「网络」标签，然后刷新页面。找到那张加载失败的图片请求，查看它的状态码：如果是404，那肯定是路径问题；如果是其他错误状态，再根据提示针对性排查。

内容的提问来源于stack exchange，提问作者Kali