在 ag-grid 中显示图像

Posted 2023-03-28

【中文标题】在 ag-grid 中显示图像

【英文标题】：Display image in ag-grid

【发布时间】：2019-10-04 04:19:53

【问题描述】：

ag-grid 社区 v20，Angular 7。

我的Angular 7 应用程序中有一个可用的ag-grid。我想在一列中显示图像。 https 地址包含在field 列中。我搜索了 ag-grid 的文档和网络，但没有找到这种基本场景的示例。有人可以给出columnDef 的代码示例吗？ cellRenderer 是这样做的吗？

 headerName: 'Select', field: 'Image', width: 75, sortable: false,
    cellRenderer: '<span><img border="0" width = "15"  src=xxxx ></span>' ,

【参考方案1】：

这是一个多步骤的过程。

见Learn to customize Angular grid in less than 10 minutes

创建自定义组件。 'ImageFormatterComponent.ts'

import  Component  from "@angular/core";

@Component(
  selector: 'app-image-formatter-cell',
  template: `<img border="0"   src=\" params.value \">` )

export class ImageFormatterComponent 
  params: any;
  agInit(params: any)
    this.params = params; 
   

在app.module.ts注册

import  ImageFormatterComponent  from "./album/ImageFormatterComponent";
@NgModule(
  declarations: [ImageFormatterComponent],
  imports: [
    AgGridModule.withComponents([ImageFormatterComponent]) 
  ],

在您使用它的组件中：

import  ImageFormatterComponent  from "./ImageFormatterComponent";
  columnDefs = [
     headerName: 'Select', 
      field: 'Image', 
      width: 60,
      sortable: false, 
      autoHeight: true,
      cellRendererFramework: ImageFormatterComponent 
    

【讨论】：

你知道如何将图片名称从子组件返回给父组件吗？