- 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 ?
- 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?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- How to get card vertically centered between search bar and bottom of the viewport?
- Convert an image into grayscale image using HTML/CSS