angular - 背景图像 url 在我的 Angular 项目中不起作用

Question

我尝试将图像作为我网站的背景图像，但它在这里不起作用，这是我在 css 中放入的内容:

.background {
    background: url(assets/images/Forgot_password_2.PNG);
    /*background-color: black;*/
    width: 100%;
    height: 100%;
}

这是我得到的错误:

ERROR in ./src/app/components/forgot-password/forgot-password.component.css Module Error (from ./node_modules/postcss-loader/src/index.js): (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\hp\Documents\Projet angular 8\f-g-habilitation\src\app\components\forgot-password\forgot-password.component.css:2:21: Can't resolve 'assets/images/Forgot_password_2.PNG' in 'C:\Users\hp\Documents\Projet angular 8\f-g-habilitation\src\app\components\forgot-password'

1 | .background {

2 | background: url(assets/images/Forgot_password_2.PNG); | ^ 3 | /background-color: black;/ 4 | width: 100%;

这是我的文件的架构:

我已经尝试过此处提到的解决方案(已在 ../上删除)，但它不起作用:Angular 6 error: CSSSyntaxError - Failed to compile

有人可以帮我吗？

Answer 1

这一直是一个 Angular 问题，但有一个解决方法。

Webpack 不会检查以 ^ 开头的图像 URL。例如:

background: url("^assets/images/Forgot_password_2.PNG");