CODEWITHSUNDEEP
cssangularangular-cli
Manspof
Manspof

Reputation: 357

Angular can't load style\images

I opened an angular 4 project and I bought html & js template and I want to make it work together so into angular-cli.json under styles I wrote

  "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
        "./assets/sass/material-dashboard.scss",
        "./assets/css/demo.css",
        "./assets/fonts/fonts.css",
        "./assets/stylesheets/ionicons.min",
        "./assets/stylesheets/fonts/fonts.css",
        "./assets/stylesheets/bootstrap.css",
        "./assets/stylesheets/isotope.css",
        "./assets/stylesheets/venobox.css",
        "./assets/stylesheets/slimmenu.css",
        "./assets/stylesheets/main.css",
        "./assets/stylesheets/main-bg.css",
        "./assets/stylesheets/main-responsive.css"
    ],

javascript

 "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
        "../node_modules/bootstrap-material-design/dist/js/material.min.js",
        "../node_modules/arrive/src/arrive.js",
        "../node_modules/moment/moment.js",
        "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
        "../node_modules/bootstrap-notify/bootstrap-notify.js",
        "../node_modules/chartist/dist/chartist.js",
        "./assets/javascripts/libs/common.js",
        "./assets/javascripts/libs/bootstrap.min.js",
        "./assets/javascripts/custom/main.js"
    ],

my angular cli

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
    "name": "material-dashboard-angular"
},
"apps": [{
    "root": "src",
    "outDir": "dist",
    "assets": [
        "assets",
        "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
        "./assets/sass/material-dashboard.scss",
        "./assets/css/demo.css",
        "./assets/fonts/fonts.css",
        "./assets/stylesheets/ionicons.min",
        "./assets/stylesheets/fonts/fonts.css",
        "./assets/stylesheets/bootstrap.css",
        "./assets/stylesheets/isotope.css",
        "./assets/stylesheets/venobox.css",
        "./assets/stylesheets/slimmenu.css",
        "./assets/stylesheets/main.css",
        "./assets/stylesheets/main-bg.css",
        "./assets/stylesheets/main-responsive.css"
    ],
    "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
        "../node_modules/bootstrap-material-design/dist/js/material.min.js",
        "../node_modules/arrive/src/arrive.js",
        "../node_modules/moment/moment.js",
        "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
        "../node_modules/bootstrap-notify/bootstrap-notify.js",
        "../node_modules/chartist/dist/chartist.js",
        "./assets/javascripts/libs/common.js",
        "./assets/javascripts/libs/bootstrap.min.js",
        "./assets/javascripts/custom/main.js"
    ],
    "environmentSource": "environments/environment.ts",
    "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
    }
}],
"e2e": {
    "protractor": {
        "config": "./protractor.conf.js"
    }
},
"lint": [{
        "project": "src/tsconfig.app.json"
    },
    {
        "project": "src/tsconfig.spec.json"
    },
    {
        "project": "e2e/tsconfig.e2e.json"
    }
],
"test": {
    "karma": {
        "config": "./karma.conf.js"
    }
},
"defaults": {
    "styleExt": "scss",
    "component": {}
}

}

But I get the following error:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/stylesheets/main.css

Module not found: Error: Can't resolve '../images/poster.jpg' in 'E:/xxxx/x/xxxx'

I checked the code in main.css and the image don’t have the correct path/url.

.poster-img {
background: url('../images/poster.jpg') center center no-repeat !important;
background-size: cover !important;

}

I'm trying for two hours to solive this issue, but I stuck with that.

enter image description here

in addition i have an errors

enter image description here

Upvotes: 2

Views: 12859

Answers (3)

Michele Da Rin
Michele Da Rin

Reputation: 287

Since angular-cli compliles all the css inline in the index.html page you have to write the position from that point so it'll be something like

.poster-img {
  background: url('./assets/images/poster.jpg') .... ;
  ....
}

if your image is src/assets/images/poster.jpg

Upvotes: 3

Manzer A
Manzer A

Reputation: 3806

You can try it:- Assuming images are in assets folder

   <div [ngStyle]="{background: 'url('/assets/images/poster.jpg') center center no-repeat !important;',background-size: 'cover !important'}"></div>

Or,

background: url('/assets/images/poster.jpg')

Or,

.poster-img {
background: url('/assets/images/poster.jpg') center center no-repeat !important;
background-size: cover !important;
}

Upvotes: 1

Fateh Mohamed
Fateh Mohamed

Reputation: 21367

try this, add a / before url:

background: url('/../images/poster.jpg')

Upvotes: 11

Related Questions