Ag-grid 提供了两种方式来渲染图像,一种是使用 cellRenderer,另一种是使用 cellRendererFramework。以下是两种方式的代码示例:
function imageRenderer(params) {
var imageHtml = '
';
return imageHtml;
}
...
columnDefs: [
{
headerName: 'Image',
field: 'image',
cellRenderer: imageRenderer,
},
...
]
import React, { Component } from 'react';
class ImageRenderer extends Component {
render() {
return (
);
}
}
...
columnDefs: [
{
headerName: 'Image',
field: 'image',
cellRendererFramework: ImageRenderer,
},
...
]
以上两种方式均可实现在 Ag-grid 中渲染图像。需要注意的是,第一种方式是使用函数作为 cellRenderer,可以自己编写函数来实现图像的渲染;第二种方式是使用组件作为 cellRenderer,这时需要将组件作为 cellRendererFramework 参数传递给 grid,同时也需要在组件中通过 props.value 来获取图像的 url。