Question

我正在使用react来显示包含数据库中数据的网格。
数据显示正确，但所有文本数据都显示。
我想在第一列显示一个图标。
这就是我现在所拥有的：

<Grid
  rows={products}
  columns={[
    { name: "icon", title: "Icon" },
    { name: "name", title: "Name" },
    { name: "desc", title: "Desc" },
    { name: "price", title: "Price" },
   ]
}></grid>

我的{products}包含所有数据。
运行此命令时，Icon列包含image344.png而不是实际图像。
要使Icon列显示图像而不是文本，我该怎么做？
我还尝试将图标值设置为此<img src='image344.png'>，但它仍显示文本。
请帮忙！

Answer 1

在Grid中，如果将值作为文本提供，它将仅显示实际文本。因此，请为图标列创建实际的html元素，然后它将显示图像图标。

下面添加了示例数据以在“网格”视图中呈现图像。

var products= [{icon:'image344.png',name:'test',desc:'test',price:'123'}];
 products = products.map(function(data){
    data.icon = <img src={data.icon}/>;
    return data;
 });

<Grid
  rows={products}
  columns={[
    { name: "icon", title: "Icon" },
    { name: "name", title: "Name" },
    { name: "desc", title: "Desc" },
    { name: "price", title: "Price" },
   ]
}></grid>

将图像添加到DevExtreme React Grid Bootstrap4列

1 个答案: