Angular 2从资产文件夹加载CSS背景图像

Question

我的文件夹结构看起来像

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts

在我的 home-page.component.css 中，我有以下内容

header {
    width: 200px;
    height: 200px;
    background-image: url('/src/assets/home-page-img/header-bg.jpg');
}

My angular-cli.json
    "assets": [
    "assets",
    "favicon.ico"
]

当我运行代码时，我得到

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

出于演示目的，如果我将背景图像更改为以下内容，我会得到一个完全不同的错误

background-image: url('assets/home-page-img/header-bg.jpg');

./src/app/home-page/home-page.component.css
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'

我怎样才能加载该图像？

原文由 ErnieKev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试

background-image: url('../../assets/home-page-img/header-bg.jpg');

原文由 Thyagarajan C 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我用这个。在 CSS 和 HTML“assets/”中始终以“/assets/”开头。我没有问题。 Angular 识别它。

CSS

 .descriptionModal{
    background-image: url("/assets/img/bg-compra.svg");
}

HTML

 <img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">

原文由 Samuel Seda 发布，翻译遵循 CC BY-SA 3.0 许可协议