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: