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