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

09 Jul, 2020
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>
<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>

<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.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />      <meta name="viewport"        content="width=device-width, initial-scale=1.0" />      <meta http-equiv="X-UA-Compatible"        content="ie=edge" />      <title>        Why card images use data-src (not src)        for image in Bootstrap 4 ?    </title>      <link rel="stylesheet"        href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"        crossorigin="anonymous" />              <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"            crossorigin="anonymous"></script>                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"            crossorigin="anonymous"></script>                  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"            crossorigin="anonymous">    </script>      <style>        h1 {            color: green;        }        .second {            float: right;            margin: 20px;        }        .first {            float: left;            margin: 20px;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <b>A Computer Science Portal for Geeks</b>    </center>          <div class="container">        <div class="card first" style="width: 18rem;">            <img class="card-img-top" src="https://media.geeksforgeeks.org/wp-content/uploads/20190506125816/avt.png"                alt="Card image cap" />            <div class="card-body">                <h5 class="card-title">Courses</h5>                <p class="card-text">                    Attend the courses Increase                    the probability                </p>                <a href="#" class="btn btn-primary">Attend</a>            </div>        </div>                  <!-- It loaded with JavaScript to allow            lazy loading of images -->        <div class="card second" style="width: 18rem;">            <img id="img1" class="card-img-top"                data-src="https://media.geeksforgeeks.org/wp-content/uploads/20200121112744/logo11.png"                style="height:295px;"                src="https://media.geeksforgeeks.org/wp-content/uploads/20190506125816/avt.png"                alt="Card image cap" />                              <div class="card-body">                <h5 class="card-title">Interview</h5>                <p class="card-text">                    Prepare your self for the Interview                </p>                <a href="#" class="btn btn-primary">Attend</a>            </div>        </div>    </div>      <script>        var ele = document.getElementById("img1");                  // Switch the image to the URL        // specified in data-src        ele.src = ele.dataset.src;    </script></body>  </html>
Output:
Akanksha_Rai
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?