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

Solution 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).

Solution 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">

Comments

[Enrico]

This actually works. But don't put the "image" folder inside the "assets" folder. That's why I did wrong.

[TheCoderGuy]

@LLai I am working in Angular 11 now and I came across your answer, it did help me but the problem it is that it always reloads the page. Do you know why ?

[Thomas Williams]

This did work, but the problem is that every time I save an image my page reloads, which is the reason I moved it from assets in the first place.