修改图片文件名后网页图片无法正常显示是什么原因？

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/about-sub.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;

问题排查步骤 #

• 优先检查图片路径匹配问题
  你代码中使用的是相对路径url(images/about-sub.jpg)，需要确认：
  1. CSS文件与images文件夹是否处于同级目录：如果CSS文件存放在单独的css文件夹内，需要将路径调整为url(../images/about-sub.jpg)
  2. 文件名及后缀大小写是否和实际文件完全一致：Linux服务器对文件名大小写严格区分，哪怕差一个大小写也会加载失败
  3. 替换后的图片确实已上传/存放到对应的images目录内，没有放错文件夹
• 检查图片本身合法性
  确认图片文件没有损坏、格式为浏览器支持的常规图片格式（jpg/png/webp等），文件名不要包含中文、空格或特殊符号，避免路径编码异常
• 检查CSS代码及样式生效状态
  你当前贴出的.sub-header样式末尾缺少闭合的}，虽然部分浏览器会自动兼容，但也可能导致样式解析异常，补充闭合符号即可。另外可以打开浏览器F12开发者工具，选中顶部横幅元素，查看「样式」面板中background-image属性是否被其他更高优先级的样式覆盖，点击路径链接如果返回404即可确认是路径错误
• 检查缓存问题
  图片替换后大概率存在浏览器本地缓存，按Ctrl+F5强制刷新页面，或者开启无痕模式访问测试即可。如果站点配置了CDN，还需要同步清理CDN的资源缓存。

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