使用HTML和CSS搭建网站时logo在其他浏览器及用户端无法显示如何解决

• 路径配置错误：你当前使用的是根路径/original-logo.jpg，如果站点部署在子目录、或者本地调试的服务根目录配置和线上不一致，不同环境解析路径时就会找不到资源。可替换为相对路径：如果logo文件和当前HTML文件同级，直接修改为src="original-logo.jpg"；如果存放在独立的资源目录，按照层级写对应路径即可，比如src="assets/images/original-logo.jpg"，避免根路径配置差异带来的影响。
• 图片兼容性问题：部分老旧浏览器对非常规编码的jpg文件支持较差，可将原图重新导出为基线编码的jpg格式，或替换为兼容性更好的png格式测试。同时建议补全img标签的alt属性内容，既符合无障碍规范，图片加载失败时也能显示文字提示。
• 文件权限异常：如果是线上部署的站点，检查logo文件的服务器访问权限，确保资源设置了公开可读权限（Linux服务器通常设置权限为644即可），避免访客因为权限不足无法加载资源。
• 缓存残留问题：如果仅部分用户无法显示，可检查服务器、CDN是否缓存了旧的失效资源，部署更新后清理全站缓存再做测试。

修改后的代码示例 #

<section id="header">
    <div class="header container">
      <div class="nav-bar">
        <div class="brand">
          <a href="#hero">
              <img src="original-logo.jpg" width="180px" height="80px" alt="站点Logo">
          </a>
        </div>

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