problem description

prepare to use NG-ZORRO-MOBILE to put a Grid in ionic4"s project.
successfully demonstrated Grid. But there is an awkward problem. I have tried for a long time and haven"t found out how to set up icon images using relative paths.

the environmental background of the problems and what methods you have tried

ionic4
NG-ZORRO-MOBILE

related codes

<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>
            
The content for this card
        </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);
    }
}

what result do you expect? What is the error message actually seen?

icon:"/ assets/icon/order.svg" does not display pictures when written in this way. Is there any good way or correct posture to solve this problem? I hope the picture can be displayed without bringing the domain name deployed by the project. Or there is a convenient way to complete the task of splicing domain names automatically.