在加载时以灯箱类型显示加载或旋转每个图像，同时在由于 API 问题导致加载失败时显示错误

问题描述

我使用 antd 组件在 Modal 和 Carousel 中创建了一个灯箱类型，我想要的是在当前加载图像时动态显示微调器。我的代码如下所示：

 //this will set the current ID onClick on the link type button or onClick in image
    const [currentId,setCurrentId] = useState(null);
   

    const changeCurrentId = id => {
        setCurrentId(id);
    };

     <Row>
         {data.map(d => (
                <Col key={d.Id} xxl={6} xl={6} lg={8} md={12} sm={12} xs={12}>
                        <div
                            className="card"
                                onClick={() => setVisible(!visible)}
                                style={{ cursor: 'pointer' }}>
                            <div className="cardImage">
                                <img
                                    alt={d.Title}
                                    loading="eager"
                                    src={d.Images[0].url}
               //set the currentId
                                    onClick={() => changeCurrentId(d.Id)}
                                                />
                                    </div>
                                    <div className="cardContent">
                                    <h2 className="cardTitle">{d.Title}</h2>
                //my link type button
                                        <a
                                        className="cardLink"
                                        onClick={() => {
                                        setVisible(!visible);
               //set the currentId
                                        changeCurrentId(d.Id);
                                        }}>
                                            View project
                                        </a>
                                    </div>
                                </div>
                        </Col>
                    ))}}
          </Row>

这是我的灯箱类型，当用户单击图像或“查看项目”链接类型按钮时会弹出它，它会根据状态上的 currentId 设置显示当前数据（图像）：

 <Modal
            centered
            className="project-list-modal"
            closable={false}
            footer={null}
            visible={visible}
            onCancel={onClose}
            style={{ width: '800px' }}>
            <div className={styles.carouselContainer}>
                <Carousel dots={null} ref={carousel} on>
                    {data
                        .filter(f => f.Id === currentId)
                        .map(d =>
                            d.Images.map((img,idx) => {
                                return (
                                    <div key={d.Id} 
                                        className{`${styles.imageContainer}`}>
                                        <img
                                            alt={`${d.Title}`}
                                            className={styles.image}
                                            loading="lazy"
>>>>>>>>>>>>>>>>>>>>>>>>>>here onLoad how to show spinner dynamically<<<<<<<<<
                                            //onLoad={() => { }}
>>>>>>>>>>>>>>>>>>>>>>>>>>same as onError<<<<<<<<<
                                            onError={() => {}}
                                            src={`${img.url}`}
                                        />
                                    </div>
                                );
                            })
                        )}
                </Carousel>
            </div>

            <div className={styles.arrowContainer}>
                <img
                    className={styles.arrowLeft}
                    src="/images/arrow-left.svg"
                    alt="Left arrow"
                    onClick={() => carousel.current.prev()}
                />
                <img
                    className={styles.arrowRight}
                    src="/images/arrow-right.svg"
                    alt="Right arrow"
                    onClick={() => carousel.current.next()}
                />
            </div>
        </Modal>
    

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）