NG-ZORRO-MOBILE 宫格 Grid 的 icon 如何使用相对路径

Question

问题描述

准备用 NG-ZORRO-MOBILE 在 ionic4 的工程里放一个 Grid。
成功展示了 Grid。但是有一个很尴尬的问题，我尝试了很久没有发现如何使用相对路径设置 icon 图片。

问题出现的环境背景及自己尝试过哪些方法

ionic4
NG-ZORRO-MOBILE

相关代码

<ion-header>
    <ion-toolbar>
        <ion-title>
            {{ "ME" | translate }}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>

    <ion-card>
        <div id="user_portrait_row">
            <ion-img src="./assets/shapes.svg"></ion-img>
            <img id="user_portrait" src="./assets/shapes.svg"/>
        </div>
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <p>The content for this card</p>
        </ion-card-content>
    </ion-card>

    <Grid [activeStyle]="false" [columnNum]="3" [data]="data" (OnClick)="click($event)"></Grid>

    <div Button margin [type]="'warning'">warning</div>

</ion-content>

import {Component} from '@angular/core';

@Component({
    selector: 'app-tab3',
    templateUrl: 'tab3.page.html',
    styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
    data = Array
        .from(new Array(9))
        .map((_val, i) => (
                {
                    icon: '/assets/icon/order.svg',
                    text: `name${i}`
                }
            )
        );

    click(event) {
        console.log(event);
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

icon: '/assets/icon/order.svg' 这样写是不显示图片的。用什么好的办法或者正确的姿势解决这个事情吗？我希望不用带上项目部署的域名就能显示出图片。或者有一个方便的能自动的完成拼接域名的工作。

Answer 1

这个问题最终解决了。但是和我想要的方案不一样。
使用了 https://www.iconfont.cn/ 提供的 iconfont 文件。
直接使用了 demo 里面提供提供的 Symbol 方法。
在 入口 html 哪里直接引用了 iconfont.js，看上去十分的尴尬。