Angular-cli: How can I access images outside of the assets folder

Question

I'm very new to Angular and building a photo lightbox as a learning project. Is there a way to use images from outside the project folder? I've tried using the Glob as referenced here(https://github.com/angular/angular-cli/issues/3555) and inserting a directory path in the .angular-cli.json file (see below) both without success. Is this possible in angular-cli?

 "assets": [
             "assets",
             "assets/img",
             "D:/training/img", // full path
             "../../../img",    // relative path
             "favicon.ico"
           ],

Answer 1

You should be able to accomplish this with the glob. For example if I have a folder structure

/outsideDirectory
    testImg.jpg
/myProject
    /node_modules
    /src
    .angular-cli.json

In your cli.json you can define the glob

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

This will copy the contents of your outsideDirectory to the /dist/assets/ directory. Now you can use the image within your code

<img src="assets/testImg.jpg">

Note the cli.json's assets is for static assets. If you are pushing images to outsideDirectory dynamically, it is better to host the images yourself or use some service, then reference them with a full Url. This is because the images from your glob are only a copy of the outsideDirectory contents (that occurs at build time).

Answer 2

follow below steps :

my images located in src => images => 1.png it means located in outside the assets folder

.angular-cli.json

open angular-cli.json file find the assets array add inside the array your folder name like images.

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

componenet.html

<img src="images/1.png">