【问题】antd Image组件 PreviewType

最新推荐文章于 2024-09-20 20:59:09 发布

Dream_Ji

最新推荐文章于 2024-09-20 20:59:09 发布

阅读量550

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_48958486/article/details/141471608

版权

问题描述：预览的图片由函数 getSignedUrl 函数对应生成。由于需要访问服务器，会产生加载时延，此时想要显示一张模糊版的 cover 图片或一个显示正在加载的Spin，等待函数加载完毕，再替换。不知道在 preview API中如何写，求助。

<Row gutter={[16, 40]}>
    {filteredData.map((item) => (
        <Col span={4} key={item.key}>
            <Card
                className="custom-card"
                cover={
                    <Image
                        src={item.image_path}
                        onError={() => handleImagePreview(item.image_path)}
                        preview={{
                        destroyOnClose: true,
                        src: isLoading ? '' : signedUrls,
                        onVisibleChange: (visible) => {
                              if (visible) {
                                handleImagePreview(item.image_path);
                              }
                            },
                        toolbarRender: (
                          _,
                          {
                            transform: { scale },
                            actions: {
                              onFlipY,
                              onFlipX,
                              onRotateLeft,
                              onRotateRight,
                              onZoomOut,
                              onZoomIn,
                              onReset,
                            },
                          },
                        ) => (
                          <Space size={24} className="toolbar-wrapper">
                            <DownloadOutlined onClick={() => handleDownload(item.image_path)} />
                            <SwapOutlined rotate={90} onClick={onFlipY} />
                            <SwapOutlined onClick={onFlipX} />
                            <RotateLeftOutlined onClick={onRotateLeft} />
                            <RotateRightOutlined onClick={onRotateRight} />
                            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
                            <ZoomInOutlined disabled={scale === 3} onClick={onZoomIn} />
                            <UndoOutlined onClick={onReset} />
                          </Space>
                        ),
                          }}
                        />
                      }
                      actions={[
                        <Checkbox
                          key={item.key}
                          checked={selectedKeys.includes(item.key)}
                          onChange={(e) => {
                            onSelectChange(e, item.key);
                          }}
                        />,
                        <DownloadOutlined key="download" onClick={() => handleDownload(item.image_path)} />,
                        <DeleteOutlined key="delete" onClick={() => handleDelete(item.key)} />,
                      ]}
                      style={{ marginRight: '12%' }}
                    >
                      <Meta description={item.image_size} />
                    </Card>
                  </Col>
                ))}
              </Row>