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


Output:




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.



Improved By : Akanksha_Rai