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"
  ],

---

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;
}

---

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

提前致谢。

Answer 1

解决了这里。

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

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

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

Answer 2

对于那些使用 Ionic 的人，您需要这样设置背景属性：

ion-content {
  --background: url("/assets/images/my-background.jpeg") no-repeat center center /
    cover;
}

背景前的两个破折号对我有用