Lazy load Modal Bootstrap in Reactjs

Question

I using Bootstrap 5. In a function component, I have a modal like this:

  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>
    );

This works normally. However, when I checked the Network in dev-tools, I noticed that the image in Modal was loaded. If I use this component many times, there will be a lot of images loaded while they are not actually displayed. How to fix this?

Answer 1

<img src={dog} alt="dog image" className="my-image" loading="lazy"/> this works for web , should work here too , But best way is load those modal only if needed