What are all the differences between src and data-src attributes?

Question

What are differences and consequences (both good and bad) of using either data-src or src attribute of img tag? Can I achieve the same

Answer 1

If you want the image to load and display a particular image, then use .src to load that image URL.

If you want a piece of meta data (on any tag) that can contain a URL, then use data-src or any data-xxx that you want to select.

MDN documentation on data-xxxx attributes: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Example of src on an image tag where the image loads the JPEG for you and displays it:

Example of 'data-src' on a non-image tag where the image is not loaded yet - it's just a piece of meta data on the div tag:

Example of data-src on an image tag used as a place to store the URL of an alternate image: