Angular 6 - 使用未找到的资产进行构建

Question

我正在尝试创建我的角度项目的构建。我将 scss 与这样的资产一起使用：

.ciao {
  background-image: url("../../assets/images/bck--registration-company.png");
}

运行这段代码：

ng build --prod --configuration=coll --base-href ./

我在 dist 文件夹内，在 index.html 的同一目录中，有文件“bck--registration-company.png”和“assets”文件夹，其中有另一个“bck--registration-company.png”。我想使用资产文件夹内的资源。

我尝试更改基本 href、相对和绝对图像路径，但没有任何效果。例子：

.background--image-carousel2{
  background-image: url("/assets/images/carousel2.jpg");
}

使用此路径时，请求 URL 是：

Request URL: http://localhost:63342/assets/images/carousel2.jpg

这是错误的，因为它可能是：

http://localhost:63342/project/dist/name_project/assets/images/bck--registration-company.png

在我的 angular.json 中：

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/name_project",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [

        ]
      },

我该如何解决这个问题？谢谢。

Answer 1

试试这个方法

Angular 能够直接访问资产文件夹。

.ciao {
   background-image: url("assets/images/bck--registration-company.png");
}

然后进行构建

ng build --prod 

然后将整个系统路径放入 dist/index.html 文件中

在基本 url 中设置项目文件夹的完整路径。