SCSS编译到CSS文件夹后背景图片在浏览器不显示问题求助

背景图片不显示原因 #

你使用的相对路径是基于编译后CSS文件的位置解析的，不是原SCSS文件的位置。

从项目结构可以看到，存放编译后样式的CSS文件夹和images文件夹同级在项目根目录，你当前写的./images/mobile/image-graphic-design.jpg会让浏览器在CSS文件夹内部查找images子文件夹，不存在该路径自然无法加载图片。

修复方法 #

直接修改background-image的路径，用../退到CSS文件夹的上级根目录，再进入images文件夹查找资源即可：

.graphic-design {
  display: block;
  width: 100vw;
  height: 30vh;
  // background: yellowgreen;
  margin-top: -8vh;
  background-image: url('../images/mobile/image-graphic-design.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

可选排查步骤 #

如果修改路径后仍无法正常显示，按以下顺序核对：

• 确认图片、文件夹名称拼写完全正确，注意部分服务器对路径大小写敏感
• 打开浏览器开发者工具的「网络」面板，刷新页面后查看图片资源的请求状态，返回404则继续核对路径配置
• 放开注释的background: yellowgreen属性，确认元素本身可正常渲染，排除元素宽高为0、被其他元素遮挡的问题

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