CODEWITHSUNDEEP
angular
Angry Beaver
Angry Beaver

Reputation: 465

Angular copies images to its root folder

I keep my assets images under 'assets/images/icons' folder and in my style.scss file I have rules like 'background: url(assets/images/icons/searchbox_magnifier.png) no-repeat #f5f5f5;' but while making a production build, Angular is coping all those files to its root folder and changing style.scss rules according to it, like 'background: url(searchbox_magnifier.png)', see the images attached.

style.scss production build

How to avoid the issue?

Upvotes: 11

Views: 4604

Answers (4)

Alexander Gvozd
Alexander Gvozd

Reputation: 161

I had the same problem. It is solved simply by changing the paths from relative to absolute.
For example,
background-image: url("../../../assets/images/background.svg")
or
background-image: url("~src/assets/images/background.svg")

replace with
background-image: url("/assets/images/background.svg").

It will solve your problem

Upvotes: 13

Bhavesh Jain
Bhavesh Jain

Reputation: 19

Remove all your CSS files from "styles" : [ "path to css" ]

In angular.json file.

Add all those css files references in index.html

Images referred in css and if that css files are bundled, then all those images get copied to build folder.

Upvotes: 0

May
May

Reputation: 250

I was facing the same issue. Images from assets folder, if used as relative paths in the CSS files, are COPIED to the root of the dest build.

if the path in the CSS is absolute, it does not. using absolute path solved the problem for @angry beaver , only because his application is deployed into the root folder of his web-server.

please note, that if you use --base-href in your build, it will append it to the url inside the CSS files. thus making it a problem for doing a build that needs to be deployed to different destinations (qa/pre-prod etc) if each one is in another sub-folder (for example, qa is in the root folder, and production is in a subfolder)

Upvotes: 2

k.s.
k.s.

Reputation: 3004

In your .angular-cli file please find:

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

as your defaults.

According to ./node_modules/@angular/cli/lib/config/schema.json, assets accept:

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

So in your case please try changing to: 

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

or wherever you want them to be.

Upvotes: 0

Related Questions