如何在制表符中显示图像

Question

我是 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}

我想在前端的 table 渲染中将图像 url 列显示为 url 的图像。我该怎么做？

Answer 1

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

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

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

如何在制表符中显示图像

How to show an image in tabulator

reactjs

tabulator