将后端返回的icon图标,渲染成需要的图片

135 阅读1分钟
  • 先来看看需要做出的UI图

0d1d85e1929a0586894111e7849bb4e.png

  • 后端给的接口数据

8044e137aee56f073a962cf81c3f3bf.png

  • 后端返回的图标数据是一个名称或标识符(例如 "icon"),而不是图像文件的URL或二进制数据,该怎么转换成我们需要的图片呢,那么在前端中显示图标通常需要以下步骤
  1. 图标映射表:首先,你需要在前端创建一个图标映射表,将图标名称(例如 "icon")与实际图标文件的路径或CSS类关联起来。

7e7df8c52967b3de39d45ef5e87b478.png

  1. 根据图标名称获取图标数据: 当你从后端接收到图标名称时,使用图标映射表来获取相应的图标数据

b44055cf44a039dec0d88ff9cde7c8d.png

  1. 在前端显示图标

5a6c599fb2106dfb575fedeff47e5d7.png 这样就大功告成啦!