Reactjs 中的延迟加载 Modal Bootstrap答案

【问题标题】：Lazy load Modal Bootstrap in ReactjsReactjs 中的延迟加载 Modal Bootstrap
【发布时间】：2021-10-02 11:04:13
【问题描述】：

我使用的是 Bootstrap 5。在一个函数组件中，我有一个这样的模态：

  return (
      <div>
        {/* Button trigger modal */}
        <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
          Launch demo modal
        </button>

        {/* Modal */}
        <div className="modal fade" id="exampleModal" tabIndex={-1} aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
              </div>
              <div className="modal-body">
                 <img src={dog} alt="dog image" className="my-image"/>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );

这可以正常工作。但是，当我在 dev-tools 中检查 Network 时，我注意到 Modal 中的图像已加载。如果我多次使用这个组件，会加载很多图片，但实际上并没有显示出来。如何解决这个问题？

【问题讨论】：

标签： reactjs bootstrap-5

【解决方案1】：

<img src={dog} alt="dog image" className="my-image" loading="lazy"/> 这适用于网络，也应该在这里工作，但最好的方法是仅在需要时加载这些模式

【讨论】：