相关疑难解决方法(0)

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

我的文件夹结构看起来像

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts
Run Code Online (Sandbox Code Playgroud)

在我的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"
]
Run Code Online (Sandbox Code Playgroud)

当我运行代码时,我得到了

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

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

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'
Run Code Online (Sandbox Code Playgroud)

如何加载该图像?

html css css3 angular

21
推荐指数
7
解决办法
5万
查看次数

标签 统计

angular ×1

css ×1

css3 ×1

html ×1