我的文件夹结构看起来像
-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)
如何加载该图像?