如何從assets中的config.json文件中獲取圖片url並顯示在angular中的index.html文件中

Question

我有一個 angular 項目，我在資產文件夾中有一個配置文件

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

我需要在 index.html 文件中加載 logoPath。

這是 index.html 文件中的正文：

<body>

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

            <div class="center">

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

                <!-- Material Design Spinner -->
                <div class="spinner-wrapper">
                    <div class="spinner">
                        <div class="inner">
                            <div class="gap"></div>
                            <div class="left">
                                <div class="half-circle"></div>
                            </div>
                            <div class="right">
                                <div class="half-circle"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / Material Design Spinner -->

            </div>

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

        <app></app>

    </body>

如您所見，圖像現在已硬編碼在 index.html 中

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

關於如何用放置在資產中的上述配置文件中的 brand1.logoPath 替換此處鏈接的任何建議。 這是配置文件 (brand-config.json)

Answer 1

我和你的情況一樣，以下是我的解決方案和你可以放在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']);
}

不確定此解決方案是否可以幫助您。

如何從assets中的config.json文件中獲取圖片url並顯示在angular中的index.html文件中

問題描述

1 個解決方案

解決方案1
0 已采納 2022-03-14 09:22:17

如何從assets中的config.json文件中獲取圖片url並顯示在angular中的index.html文件中

問題描述

1 個解決方案

解決方案1 0 已采納 2022-03-14 09:22:17

解決方案1
0 已采納 2022-03-14 09:22:17