- 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 align buttons in Card footer in Bootstrap ?
- How to use links on card-img-overlay class in Bootstrap 4 ?
- How to design Responsive card-deck with fixed width in Bootstrap ?
- Bootstrap 4 | Images
- How to put images in a box without space using Bootstrap?
- Responsive images in Bootstrap with Examples
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
- Image Replacement in Bootstrap using text-hide Class
- How to place the image above the slider in mobile view in bootstrap?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- Difference between bootstrap.css and bootstrap-theme.css
- Include Bootstrap in AngularJS using ng-bootstrap
- Bulma | Card
- How to get card vertically centered between search bar and bottom of the viewport?
- Difference between Bootstrap 4 and Bootstrap 5
- Difference Between Bootstrap 3 and Bootstrap 4
- Convert an image into grayscale image using HTML/CSS
- Semantic-UI | Images
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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