Angular 5 背景图像不会显示答案

【问题标题】：Angular 5 background image will not showAngular 5 背景图像不会显示
【发布时间】：2018-03-19 17:48:03
【问题描述】：

我需要帮助。我是一个完整的初学者，我无法在任何地方找到解决方案，如果已经被问到，很抱歉，但无论我尝试什么，我都无法在一页上显示背景图片。

我想做什么？

在首页显示背景图片。

注意事项：

默认情况下我没有资产文件夹。
尝试本地主机：4200
在浏览器中转到Localhost:4200/assets/images/bg.jpg会显示图片。
如果我将在线托管图像放入 url()，一切正常。

由于我的根目录下没有 assets 文件夹，我在 src 文件夹中创建了一个。

结构：

► node_modules
▼ src
   ▼ app
      ▼ components
         ▼ home
           home.component.html
           home.component.scss
           home.component.spec.ts
           home.component.ts
   ▼ assets
      ▼ images
         ▼ bg.jpg

.angular-cli.json

  "assets": [
    "assets",
    "images",
    "favicon.ico"
  ],

home.component.scss

.homeBg {
  background-image: url('../../../assets/images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  width: 100vw;
  height: 100vh;
}

有人可以帮助我并告诉我我做错了什么吗？我花了将近 3 个小时试图弄清楚这一点。

提前致谢。

【问题讨论】：

浏览器开发工具是否显示 bg.jpg 的 404 错误。如果有，请求的 url 是什么？
url('bg.507198febc2a9a98bcf6.jpg') - 无效的属性值。
嗯，是的。似乎从背景图像中删除 -image 修复了它。

标签： angular-cli angular5

【解决方案1】：

已解决here。

这是因为您还指定了“no-repeat”以及您的背景图片。将您的代码更改为：
background: url('../../../assets/images/bg.jpg') no-repeat center center fixed;

感谢@Mike Lun 提醒我检查实际错误。

【讨论】：