Why card images use data-src (not src) for image in Bootstrap 4 ?

Bootstrap 4 card images use src in image tags to providing the location to be loaded in the given image tag and data-src to provide additional information that can be used by JavaScript for improving the users’ experience. For data-src and src tag we can conclude as follows:
src:

• If you want to load and display a particular image, then use .src to load that image URL.

data-src:

• If you want a piece of metadata (on any tag) that can contain a URL, then use data-src or any data-xxx that you want to select.
• The data-* attributes are used to store custom data private to the page or application.
• The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.
• The data can then be used by JavaScript to create a more engaging user experience.

Syntax:

• Using src attribute:

  <img id="img1" src="abc.jpg">
  
  <script>
      var url = document.getElementById("img1").src;
  </script>

• Using data-src attribute:

  <img id="img1" src="xyz.jpg" data-src="abc.jpg
  <script>
      var ele = document.getElementById("img1");
  
      // Switch the image to the URL specified in data-src
      ele.src = ele.dataset.src;
  </script>
  

Below example illustrates the above concept:

Example: The below code can be seen how src attribute is used to provide a link to image and data-src can be used to provide additional information to JavaScript like here it was used to change the original src link for the image with one in the data-src attribute.

Output: