ant-design Table框架中加入图片

 问题描述：想在 picture 列中，展示图片缩略图。

 我的代码：

  const [dataSource, setDataSource] = useState([
    {
      key: '0',
      picture: 'Quadratic_illustration.png',
      type: 'txt2img',
      model: 'sd',
    },
    {
      key: '1',
      picture: '../assets/portrait_photography.png',
      type: 'img2img',
      model: 'sd',
    },
  ]);

  const defaultColumns = [
    {
      title: 'Picture',
      dataIndex: 'picture',
      width: '30%',
      ...getColumnSearchProps('picture'),
      editable: true,
    },
    {
      title: 'Type',
      dataIndex: 'type',
      ...getColumnSearchProps('type'),
      editable: true,
    },
    {
      title: 'Model',
      dataIndex: 'model',
      ...getColumnSearchProps('model'),
      editable: true,
    },
    {
      title: 'Operation',
      dataIndex: 'operation',
      render: (_, record) =>
        dataSource.length >= 1 ? (
          <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)}>
            <a>Delete</a>
          </Popconfirm>
        ) : null,
    },
  ];

找到：在table显示图片_antd的Table组件如何插入图片-CSDN博客

还是没有反应。即使是console.log() 中的内容都没打印出来。

发现是受可搜索功能的影响。删除这行代码，可以打印出 record 的内容。

...getColumnSearchProps('picture')

 但是仍未正确显示图片。

最后发现将本地图片文件改为网页路径即可正确显示。

  const [dataSource, setDataSource] = useState([
    {
      key: '0',
      picture: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      type: 'txt2img',
      model: 'sd',
    },
    {
      key: '1',
      picture: '../assets/portrait_photography.png',
      type: 'img2img',
      model: 'sd',
    },
  ]);

第一张照片可以显示，第二张照片不能。仍在寻找原因。