Open In App

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

Last Updated : 09 Jul, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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>


Output:



Similar Reads

How to use grid for images in bootstrap card ?
Images can be added to the Bootstrap card by simply using an img tag. But we cannot use the same method directly to place an Image Grid into the Bootstrap Card as it will be lead to a misaligned design. Therefore, to get a per-flow to place image Grid into Bootstrap Card. The perfectly aligned grid we need to add some CSS to our HTML code. Approach
2 min read
Bootstrap 5 Images Aligning Images
Bootstrap 5 Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images. We can use the .mx-auto margin utility class to center the block-level images. Aligning Images used Classes: .float-start: This class is used to set the position of an element to left..float-end: This c
3 min read
Bootstrap 5 Images Responsive images
Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio. Responsive images used Class: .img-fluid: This class is use
2 min read
How to display multiple horizontal images in Bootstrap card ?
Pre-requisite: Bootstrap Cards Bootstrap cards provide a flexible and extensible content container with multiple variants and options such as styling the Tables, stacking multiple images horizontally/vertically, making the stacked contents responsive, etc. Cards include so many options for customizing their backgrounds, borders, Header, footer, col
2 min read
How to Display a Card within a Card using Bootstrap ?
In Bootstrap, the Card component is used to create stylish and responsive containers for displaying various types of content. We can create a Card within a Card effect with different approaches using Bootstrap including the Nested Card Components approach and Card Group approach. Table of Content Using Nested Card ComponentsUsing Card GroupUsing Ne
3 min read
HTML | DOM Input Image src Property
The Input Image src Property is used to sets or returns the value of the src attribute of an Input Image. The src Attribute is used to specify the URL of the image to be used as a submit button. Syntax: It returns the src Property. imageObject.src It sets the src Property. imageObject.src = "URL" Property Values: It contains a single value URL whic
2 min read
HTML DOM Image src Property
The HTML DOM Image src Property is used to set or returns the value of the src attribute of the &lt;img&gt; element. This attribute is used to specify the URL of the Image. Syntax: Returns the image src property. imageObject.src Set the image src property. imageObject.src = URL Property Values: It contains a single value URL that specifies the URL
2 min read
How to hide “Image not found” icon when source image is not found?
JavaScript and jQuery can be used to hide the "Image Not Found"icon when the image is not found. The basic idea is to set the display property of the image object to 'hidden' when an error arises. Let us consider the below HTML code which displays the GeeksforGeeks logo for demonstration purpose.Example: In this example, we will not hide the icon o
2 min read
How to use links on card-img-overlay class in Bootstrap 4 ?
When we put any link inside of a bootstrap card it performs well until we used card-img-overlay to put an image as a background of that card. Bootstrap Card: A card in BootStrap 4 is a flexible and extensible content container. It includes options for headers, footers, content, colors, links etc. Card Image Overlays: card-img-overlay is used to set
3 min read
How to align images in card with dynamic title?
[caption width="800"] [/caption] Several times it is needed to display information on a website in the form of cards. Cards are basically a component containing a heading, an image, and an optional description. The way in which we align the images, headings, and text in our cards defines the aesthetics, that is, the look and feel of the card. Howev
3 min read