NG-ZORRO-MOBILE 宫格 Grid 的 icon 如何使用相对路径
问题描述
准备用 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' 这样写是不显示图片的。用什么好的办法或者正确的姿势解决这个事情吗?我希望不用带上项目部署的域名就能显示出图片。或者有一个方便的能自动的完成拼接域名的工作。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这个问题最终解决了。但是和我想要的方案不一样。
使用了 https://www.iconfont.cn/ 提供的 iconfont 文件。
直接使用了 demo 里面提供提供的 Symbol 方法。
在 入口 html 哪里直接引用了 iconfont.js,看上去十分的尴尬。