Angular 将图像复制到其根文件夹答案

【问题标题】：Angular copies images to its root folderAngular 将图像复制到其根文件夹
【发布时间】：2020-07-31 20:31:48
【问题描述】：

我将资产图像保存在“assets/images/icons”文件夹下，在 style.scss 文件中，我有类似“background: url(assets/images/icons/searchbox_magnifier.png) no-repeat #f5f5f5;”之类的规则但是在进行生产构建时，Angular 会将所有这些文件复制到其根文件夹并根据它更改 style.scss 规则，例如“背景：url（searchbox_magnifier.png）”，请参阅附件。

style.scss production build

如何避免这个问题？

【问题讨论】：

您是否使用 angular-cli 进行构建？
是的，ng build --prod --aot
你使用的是什么版本的cli？是否有 angular.json 文件或 .angular-cli 文件？
Angular CLI: 1.7.3 并且在项目的根文件夹下也有 .angular-cli.json 文件。

标签： angular

【解决方案1】：

我遇到了同样的问题。只需将路径从相对更改为绝对即可解决。
例如，
background-image: url("../../../assets/images/background.svg")
或
background-image: url("~src/assets/images/background.svg")

替换为
background-image: url("/assets/images/background.svg")。

它会解决你的问题

【讨论】：

在引用 / 并将应用程序移动到子文件夹时似乎很棘手。似乎不知道 ./ 或具有开箱即用的路径智能。如果您解决此范围界定问题，它会将其全部移至根目录。它似乎更锚定到文件所在的位置，而不是 HTML 真正加载 CSS 的位置，即根目录。

【解决方案2】：

我遇到了同样的问题。 assets 文件夹中的图像，如果用作 CSS 文件中的相对路径，将被复制到 dest 构建的根目录。

如果 CSS 中的路径是绝对路径，则不是。使用绝对路径解决了@angry beaver 的问题，只是因为他的应用程序部署到了他的网络服务器的根文件夹中。

请注意，如果您在构建中使用 --base-href，它会将其附加到 CSS 文件中的 url。因此，如果每个都在另一个子文件夹中（例如，qa 在根文件夹中，而生产在子文件夹）

【讨论】：

【解决方案3】：

在您的.angular-cli 文件中，请找到：

"assets": [
   "assets",
   "favicon.ico"
]

作为您的默认设置。

根据./node_modules/@angular/cli/lib/config/schema.json，资产接受：

"assets": {
        "type": "array",
        "description": "List of application assets.",
        "items": {
          "oneOf": [
            {
              "type": "string"
            },
            {
              "type": "object",
              "properties": {
                "glob": {
                  "type": "string",
                  "default": "",
                  "description": "The pattern to match."
                },
                "input": {
                  "type": "string",
                  "default": "",
                  "description": "The dir to search within."
                },
                "output": {
                  "type": "string",
                  "default": "",
                  "description": "The output path (relative to the outDir)."
                },
                "allowOutsideOutDir": {
                  "type": "boolean",
                  "description": "Allow assets to be copied outside the outDir.",
                  "default": false
                }
              },
              "additionalProperties": false
            }
          ]
        },

所以在你的情况下，请尝试更改为：

"assets": [
   ...
   {
      "glob": "**/*",
      "input": "./assets",
      "output": "assets/"
   }
 ]

或者你希望他们在哪里。

【讨论】：

感谢您的帮助！我试图实现你的代码，但我遇到了问题，我无法进行构建，因为控制台中有很多错误，然后我只是将我的 css 代码从 url(assets/images/icons/searchbox_magnifier.png) 更改为url('/assets/images/icons/searchbox_magnifier.png') 现在它按照预期进行构建。
好吧，我当时没做什么 :) 很高兴你解决了你的问题！

【解决方案4】：

从 “风格”：[ “通往 CSS 的路径” ]

在 angular.json 文件中。

在 index.html 中添加所有这些 css 文件引用

在 css 中引用的图像，如果该 css 文件被捆绑，那么所有这些图像都会被复制到构建文件夹。

【讨论】：