Angular 5 背景图片不会显示

Question

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

我想做的事？

在主页上显示背景图像。

笔记：

• 我默认没有资产文件夹。
• 在本地主机上尝试：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"
  ],

---

主页.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 个小时试图弄清楚这一点。

提前致谢。

Answer 1

这里解决了。

这是因为您还指定了“不重复”以及背景图像。将您的代码更改为：

background: url('../../../assets/images/bg.jpg') no-repeat center center fixed;

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