如何在制表符中显示图像答案

【问题标题】：How to show an image in tabulator如何在制表符中显示图像
【发布时间】：2021-05-12 12:02:46
【问题描述】：

我是 reactjs 新手，也是制表新手。我正在使用 sql 数据库中的数据库列设置制表符。在 sql 数据库中存在一个图像 url 列，在浏览器中打开时会显示图像。

我正在按如下方式设置我的制表器：

const ForwardInventoryColumns=[
      {formatter:"responsiveCollapse", width:30, minWidth:30, align:"center", resizable:false, 
     headerSort:false},
      {
        title: "",
        field: "",
        align: "center",
        headerSort:false,
        formatter: reactFormatter(<UpdateDataButton />),        
      },
      
      { title: "Type", field: "type", minWidth : 20, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "ID", field: "id", minWidth : 150, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "Description", field: "desc", minWidth : 40, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData,  
      validator:{type:"max", parameters:99999999 },visible:true},
      { title: "ImageURL", field: "imgurl", minWidth : 20, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData , 
      validator:{type:"max", parameters:99999999 },visible:true},
      { title: "Active", field: "active", minWidth : 20, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData , 
      validator:{type:"max", parameters:99999999 },visible:true}

我想在我的前端呈现的表格中将图像 url 列显示为 url 的图像。我该怎么做？

【问题讨论】：

标签： reactjs tabulator

【解决方案1】：

使用“图像”格式化程序。来自 v4.9 文档：

{title:"Example", field:"example", formatter:"image", formatterParams:{
    height:"50px",
    width:"50px",
    urlPrefix:"http://website.com/images/",
    urlSuffix:".png",
}}

“示例”字段中数据的“值”将放置在 urlPrefix 和 urlSuffix 值之间。如果您的数据具有完整的 URL，请不要在列定义中使用这些参数中的任何一个。

【讨论】：