如何在Directus表格中显示下拉框配置的状态图标？

Directus表格默认不会渲染HTML文本，这就是你存<img src>链接只显示占位内容的原因——Superset支持HTML渲染所以能正常显示，而Directus表格默认仅输出纯文本。要在Directus里实现状态图标显示，有几种原生可行的方案：

方案1：使用「状态字段（Status Field）」（最简便） #

直接把字段类型改成Status，无需手动存储HTML：

• 进入数据模型编辑页面，找到目标字段，将类型改为Status
• 在「选项」配置中添加两个状态项：
  • 第一项：文本填green，值设为对应状态标识（比如1或green），「图标」选择内置图标或上传你的绿色状态图标
  • 第二项：文本填red，值设为对应状态标识，「图标」配置红色状态图标
• 保存后，表格会自动渲染对应状态的图标，无需额外处理

方案2：使用「显示模板（Display Template）」 #

如果坚持用下拉框字段，可通过模板渲染图标：

• 数据模型中，将目标下拉框字段的「显示」方式改为Template
• 在模板输入框中编写渲染逻辑，比如：
  若下拉框值是Directus文件ID：

  <img src="{{ directus_files_url(value) }}" alt="{{ value }}" width="24" height="24">
  

  若下拉框值是red/green（对应文件名为red-icon.png/green-icon.png，存于Directus文件库）：

  <img src="/assets/{{ value }}-icon.png" alt="{{ value }}" width="24" height="24">
  

• 保存后，表格会解析模板并渲染出图标

方案3：自定义字段扩展（进阶） #

如果需要更复杂的动态逻辑，可开发简单的Vue组件作为自定义字段扩展，直接在表格中渲染图标。这个方案需要基础前端开发能力，适合有定制需求的场景。

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