Assets

Within your application, the angular cli automatically generates the application's assets directory, this is where you can place images relative to the project.

└── apps
    └── your_application
        └── src
            └── assets
                └── your_app_name
                    └── icons
                        └── ...
                    └── images
                        ├── image_one.png
                        └── image_two.jpg

Note: Add an additional directory that is your project name in the Assets folder. All the project assets must live in there.

To refrence an existing image, prefix the image source with ../assets/images/

<img src="../assets/images/investec-logo.svg" width="152" height="30" class="d-inline-block align-top" alt="">

In order to import the shared assets (icons, images..) within your project, the platform team will need to add the additional "asset" to the project's angular.json schema.

Open up the angular.json file in the root of the mono-repo and locate you project. Within your project's specific schema, add the adjust it to represent the below:

...
"assets": [
  "apps/app-platform-pc/src/favicon.ico",
  "apps/app-platform-pc/src/assets",
  {
    "glob": "**/*",
    "input": "./libs/shared-assets/",
    "output": "./assets"
  },
  {
    "glob": "**/*",
    "input": "./apps/dashboard/src/assets",
    "output": "./assets"
  },
  {
    "glob": "**/*",
    "input": "./apps/ecosystem/src/assets",
    "output": "./assets"
  },
...
],

You may now reference images within your components as if they were in your assets folder within your project. As an example of how to include an image, please see below:

<img src="../assets/images/investec-logo.svg" width="152" height="30" class="d-inline-block align-top" alt="">

Note that if you place the shared-assets reference above the rest of the references, your project will not be able to overwrite files with the same name hence placing it at the bottom is preferred. An example would be if your application needed a different icon-72x72.png, you don't need to change the file name and reference, you can simple place the file with the same same in your project's assets and this will take preference.