角不能加载样式图像

Question

我打开了一个角4项目，我买了html & js模板，我想让它一起工作，所以在我编写的样式下，将其转换成角-cli.json。

  "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"
    ],

我的角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": {}
}

}

但我得到了以下错误：

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

模块未找到:错误:无法解析E:/xxxx/x/xxxx‘中的“../图像/poster.jpg”

我检查了main.css中的代码，图像没有正确的路径/url。

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

}

我试了两个小时来解决这个问题，但我坚持住了。

​

​

另外，我有一个错误

​

​

Answer 1

由于角cli在index.html页面中完成了所有css内联，因此您必须从该位置开始编写位置，因此它将类似于

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

如果您的映像是src/assets/映像/poster.jpg

Answer 2

试试这个，在url之前添加一个/：

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

Answer 3

您可以尝试：-假设图像在资产文件夹中

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

或,

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

或,

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