Angular 2从Assets文件夹加载CSS背景图像 [英] Angular 2 Load CSS background-image from assets folder

问题描述

我的文件夹结构看起来像

My folder structure looks like

-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中，我有以下内容

Inside my home-page.component.css, I have the following

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)

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

For demonstrating purpose, If I change background-image to the following, I get a whole different error

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'

如何获取该图像?

推荐答案

尝试

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

这篇关于Angular 2从Assets文件夹加载CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！