- If you want to load and display a particular image, then use .src to load that image URL.
- 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.
- 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:
- How to use grid for images in bootstrap card ?
- How to display multiple horizontal images in Bootstrap card ?
- How to use links on card-img-overlay class in Bootstrap 4 ?
- How to align images in card with dynamic title?
- How to align buttons in Card footer in Bootstrap ?
- How to design Responsive card-deck with fixed width in Bootstrap ?
- Bootstrap 5 | Card
- HTML | DOM Input Image src Property
- Responsive images in Bootstrap with Examples
- Bootstrap 4 | Images
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- How to put images in a box without space using Bootstrap?
- How to hide “Image not found” icon when source image is not found?
- AngularJS | ng-src Directive
- HTML | DOM Track src property
- How to extract img src and alt from html using PHP?
- HTML | DOM Video src Property
- HTML | <img> src Attribute
- HTML | <frame> src Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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