How to get image url from config.json file in assets and display it in index.html file in angular-CodePudding

I have an angular project where i have a config file in assets folder

{
    "brandConfig": "brand1",
    
    "brand1":
    {"urlPath": "http://192.168.168.60:8081/mantle-services",
        "brandName": "brand1",
        "logoPath": "assets/images/logos/logosemiwhite.svg",
        "logo1": "assets/images/logos/logosemiwhite.svg",
        "logo2": "assets/images/logos/logo.svg",
        "theme":"theme-brand1",
        "defaultLanguage": "en"
        
   },

   "brand2":{
    "urlPath": "http://192.168.168.70:8081/mantle-services",
    "brandName": "brand2",
    "logoPath": "assets/images/logos/brand2-white.png",
    "logo1": "assets/images/logos/bbrand2-only-symbol.png",
    "logo2": "assets/images/logos/logo.svg",
    "theme":"theme-fynhouse",
    "defaultLanguage": "en"
   }
}

I need to load the logoPath in index.html file .

this is the body in index.html file:

<body>

        <!-- FUSE Splash Screen -->
        <fuse-splash-screen id="fuse-splash-screen">

            <div >

                <div >
                    <img width="128" src="assets/images/logos/logosemiwhite.svg">
                </div>

                <!-- Material Design Spinner -->
                <div >
                    <div >
                        <div >
                            <div ></div>
                            <div >
                                <div ></div>
                            </div>
                            <div >
                                <div ></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / Material Design Spinner -->

            </div>

        </fuse-splash-screen>
        <!-- / FUSE Splash Screen -->

        <app></app>

    </body>

as you can see the image is now hardcoded in index.html

<img width="128" src="assets/images/logos/logosemiwhite.svg">

any suggestions on how to replace the link here with brand1.logoPath from the above config file placed in assets . this is the config file (brand-config.json)

CodePudding user response：

I having the same circumstance as yours, following is my solution and the codes you can put under app.component.ts:

constructor(@Inject(DOCUMENT) private _document;)
{
  const brands = require('../your_path/../config.json');

  let config: string = brands['brandConfig'];
  var brand = brands['config'];

  this._document.getElementById('img_tag_id').setAttribute('src', brand['logoPath']);
}

Not sure if this solution can help you.