JavaScript昼夜切换器实现时夜间背景图片加载异常问题求助

算力阿峰

2026-10-2

问题排查方案

文件名/路径拼写错误
请检查项目中backgrounds目录下的夜间图片文件名是否与代码中写的tjmahalnight.jpg完全一致，注意区分大小写（Windows系统不区分大小写但部署到Linux服务器会区分），确认文件后缀是否为jpg而非jpeg、png等其他格式。由于白天背景可以正常加载，说明backgrounds目录的相对路径是正确的，大概率是夜间图的文件名拼写有误。
图片文件损坏
直接打开本地存储的夜间泰姬陵图片，确认文件可以正常预览，排除下载过程中文件损坏、下载不完整的问题。
背景样式配置缺失
当前代码仅设置了backgroundImage属性，没有配置背景图的展示规则，若夜间图尺寸与白天图差异较大，可能出现图片已加载但未正常展示的情况，可在CSS中补充body的基础背景配置：

body {
  /* 背景图铺满容器 */
  background-size: cover;
  /* 禁止背景重复 */
  background-repeat: no-repeat;
  /* 背景图居中展示 */
  background-position: center;
  /* 保证body高度占满视口 */
  min-height: 100vh;
  margin: 0;
}