Why does Bootstrap 4 card images use data-src and not src for image tags?

Question

In the demo code below it uses data-src but no img src. How is the image applied? Does the javascript modify this somehow?

http://v4-alpha.getbootstrap.com/components/card/

 <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>

Answer 1

Bootstrap 4 documentation uses holder.js, see http://imsky.github.io/holder/

Also see: https://github.com/imsky/holder#usage

Include holder.js in your HTML:

Holder will then process all images with a specific src attribute, like this one:

The above tag will render as a placeholder 300 pixels wide and 200 pixels tall.

To avoid console 404 errors, you can use data-src instead of src.

Holder is included via http://v4-alpha.getbootstrap.com/assets/js/docs.min.js