React.js技术问题：如何将代码中的图标替换为图片（替换失败）

你原来用的是PrimeIcons的类名（pi pi-fw pi-id-card），这类组件默认是识别图标类的，直接塞图片路径肯定无效，得看组件的支持方式，分三种情况处理：

1. 组件自带图片属性（比如PrimeNG MenuItem） #

如果是用PrimeNG的菜单组件，它本身提供了image字段专门放图片路径，直接替换icon字段就行：

{
  label: 'Cooling Chamber',
  image: 'assets/layout/images/motor.jpeg', // 用image替代icon
  routerLink: ['/uikit/floatlabel']
}

2. 组件只支持图标类，用自定义模板搞定 #

要是组件没提供图片字段，就自己写模板渲染图片。拿PrimeNG的Menu举例，模板这么改：

<p-menu [model]="menuItems">
  <ng-template pTemplate="item" let-item>
    <div class="custom-menu-item">
      <img [src]="item.imgPath" alt="图标" class="menu-icon" />
      <span>{{item.label}}</span>
    </div>
  </ng-template>
</p-menu>

然后在TS里给菜单项加个imgPath字段：

menuItems = [
  {
    label: 'Cooling Chamber',
    imgPath: 'assets/layout/images/motor.jpeg',
    routerLink: ['/uikit/floatlabel']
  }
];

再补点CSS调下图片大小：

.menu-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

3. 自己写的组件，改渲染逻辑 #

如果是你自定义的组件，那得改组件里处理icon的代码——原来的逻辑应该是把icon当CSS类加在<i>标签上，所以图片路径没用。改成判断如果是路径就渲染<img>，否则加类：

<!-- 组件模板示例 -->
<div class="menu-item">
  <ng-container *ngIf="item.icon.includes('assets/'); else useIconClass">
    <img [src]="item.icon" alt="菜单图标" />
  </ng-container>
  <ng-template #useIconClass>
    <i [class]="item.icon"></i>
  </ng-template>
  <span>{{item.label}}</span>
</div>

改完之后，你原来的代码直接放图片路径就能用了：

{
  label: 'Cooling Chamber',
  icon: 'assets/layout/images/motor.jpeg',
  routerLink: ['/uikit/floatlabel']
}

内容的提问来源于stack exchange，提问作者kaviya shri