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

发布于 2022-09-11 17:07:28 字数 1757 浏览 31 评论 0

问题描述

准备用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

惜醉颜 2022-09-18 17:07:28

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

图片描述

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文