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

Don't think so with pure cli config, have been toying with the idea of adding gulp to copy files under assets prior to build. — Richard Matsen, Oct 12 '17 at 13:33
Tested answer - https://stackoverflow.com/a/53432121/5043867 — Pardeep Jain, Nov 22 '18 at 13:40

score 13 · Accepted Answer · answered Oct 12 '17 at 13:32

13

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

answered Oct 12 '17 at 13:32

LLai

13,128
3
41
45

Thanks definitely helpful. The images are being pulled into the dist folder and I can see the UI is getting the proper path for the images, however they are being displayed as broken links. I'm using a service to pass in a json with a url pointing to the images in the dist folder. Still trying to work this through https://github.com/itLead797/ImageGallery – Robert Price Oct 15 '17 at 17:26
Got it!... I needed to read your response more carefully. For anyone following in my footsteps. npm install glob --save Add glob line (above) to angular-cli.json assets array reference the assets directory in the html (not the dist/assets) run ng build – Robert Price Oct 15 '17 at 23:36
@RobertPrice I'm glad it worked! As a side note, you shouldn't need to `npm install glob --save`, glob is a dependency of @angular/cli so you install glob to node_modules when you install @angular/cli – LLai Oct 16 '17 at 13:15
1

@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 ? – TheCoderGuy Dec 12 '20 at 12:02

score 3 · Answer 2 · answered Oct 12 '17 at 13:34

3

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

answered Oct 12 '17 at 13:34

Chandru

10,864
6
38
53

This actually works. But don't put the "image" folder inside the "assets" folder. That's why I did wrong. – Enrico Apr 20 '18 at 10:08
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. – Thomas Williams Feb 08 '22 at 18:10

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

2 Answers2

Linked

Related