Question

我打开了一个有角度的4项目，我买了html＆amp; js模板，我想让它一起工作，所以在我编写的样式

下的angular-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'中的'../ images/poster.jpg'

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

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

}

我正试着用两个小时来解决这个问题，但我坚持这一点。

另外我有错误

Answer 1

由于angular-cli在index.html页面中汇编了所有内联css，你必须从该点开始编写位置，这样它就像是

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

如果您的图片是src / assets / images / poster.jpg

Answer 2

您可以尝试： - 假设图像位于资源文件夹

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

Answer 3

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

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

Angular无法加载样式\图像

3 个答案: