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

郭大鹏
  • 47

问题描述

准备用 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' 这样写是不显示图片的。用什么好的办法或者正确的姿势解决这个事情吗?我希望不用带上项目部署的域名就能显示出图片。或者有一个方便的能自动的完成拼接域名的工作。

回复
阅读 1.3k
1 个回答

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

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏