CODEWITHSUNDEEP
angularangular-material
Nawfal bougrine
Nawfal bougrine

Reputation: 103

background image url does not work in my angular project

I try to put an image as background image of my site but it does not work here is what I put in my css:

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

and here is the error I get:

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%;

and here is the architecture of my files:

architecture files

I have already tried the solutions that were mentioned here (as removed on ../) but it does not work: Angular 6 error: CSSSyntaxError - Failed to compile

can some one help me please ??

Upvotes: 3

Views: 3767

Answers (2)

Daniel Eisenhardt
Daniel Eisenhardt

Reputation: 593

This has been an angular issue for a while, but there is a workaround.

Webpack will not check an image url starting with ^. For example:

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

Upvotes: 6

Gonçalo Alves
Gonçalo Alves

Reputation: 46

Did you include the assets folder on you angular.json file? If not, I'll leave a link with different ways to do it. Cheers.

Upvotes: 0

Related Questions