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

Question

我正在尝试创建我的 Angular 项目的构建。 我正在将 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” ”。我想使用 assets 文件夹中的资源。

我尝试更改基本 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 可以直接访问 assets 文件夹。

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

然后进行构建

ng build --prod 

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

在 base url 中设置项目文件夹的整个路径。