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:

data-src:

Syntax:

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous" />
          
    <script src=
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
              
    <script src=
            integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
              
    <script src=
            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=
                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=
                style="height:295px;"
                src=
                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>
chevron_right

Output:





Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai

Article Tags :