如何从资产中的 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">

关于如何将上述配置文件中的 link 替换为 brand1.logoPath 的任何建议 assets 。这是配置文件 (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']);
}

不确定此解决方案是否可以帮助您。

如何从资产中的 config.json 文件中获取图像 url 并将其显示在 angular 中的 index.html 文件中

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

html

javascript

frontend

http

angular