Question

我正在尝试学习和使用Angular。我的依赖是

"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"
},

我有以下组件：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `<div id='wrapper'>
                <div id='header'></div>
                <div id='logo'></div>
                {{name}}
           </div>`,
styleUrls: ['./src/app/app.component.css']
})
export class AppComponent { name = 'Angular'; }

以上引用文件中的以下css：

#wrapper {
min-height: 100%;
position: relative;
margin-bottom: -30px;
}

#header {
background: url(/Content/Images/cover_background.jpg);
background-repeat: no-repeat;
background-size: cover;
}

#logo {
width: 252px;
height: 207px;
margin: auto;
padding-top: 150px;
padding-bottom: 150px;
background: url(/Content/Images/logo_square_white.png);
background-repeat: no-repeat;
background-position: center;
}

鉴于所有这些，当页面呈现时，图像的所有空间都被分配。当我在Chrome开发者工具中查看网络流量时，我看到图片加载了200 OK。我甚至可以单击开发人员工具中的图像并查看它们。但是在屏幕上，图像只有一个空白页面。

文字＆＃39; Angular＆＃39;显示在正确的位置。只缺少背景图片。

在开发人员工具中，我禁用了浏览器缓存。

如何让我的背景CSS图像显示在我的Angular组件中？

如何在Angular中显示css背景图像

0 个答案: