GitHub静态页面图片加载失败，本地正常，求CSS路径排查帮助

先查这几个关键点 #

• 核对相对路径
  先理清楚CSS文件和图片的目录结构：比如CSS在css文件夹里，图片在images文件夹，那CSS里的路径得写成../images/xxx.jpg，不能直接写images/xxx.jpg——因为CSS是从自己的目录出发找文件的。
• GitHub Pages部署的话用根路径
  如果是要部署到GitHub Pages，路径得加上仓库名开头，比如/carousel/images/xxx.jpg，不然GitHub Pages会从域名根目录找，找不到你的仓库里的图片。
• 文件名别写错
  GitHub是区分大小写的，比如Slide1.jpg和slide1.jpg是两个文件，还有扩展名要对应，别把.jpg写成.png了。
• 检查CSS语法
  写background-image的时候别犯低级错误，正确写法参考：

  .carousel-item {
    background-image: url('../images/slide1.jpg');
    background-size: cover; /* 加上这个能让图片适配容器 */
    background-position: center;
  }
  

针对你的仓库的小建议 #

先打开你的仓库，确认CSS文件和图片的位置：

1. 看CSS文件在哪个文件夹，比如是css/style.css还是直接根目录的style.css
2. 找到图片所在的文件夹，比如images或者assets/img
3. 算好相对路径替换进去，还可以直接在浏览器里访问图片的raw地址（仓库里点图片选“Raw”），能打开的话说明图片没问题，就是路径写错了。

等CSS的问题解决了，JS里的图片路径也是同样的逻辑，照着调整就行。

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