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.

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


Ouput:




My Personal Notes arrow_drop_up


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.