Solución:
Los atributos src y data-src no tienen nada en común, excepto que ambos están permitidos por HTML5 CR y ambos contienen las letras src. Todo lo demás es diferente.
los src El atributo se define en las especificaciones HTML y tiene un significado funcional.
los data-src atributo es solo uno del conjunto infinito de data-* atributos, que no tienen un significado definido pero que pueden usarse para incluir datos invisibles en un elemento, para su uso en secuencias de comandos (o estilo).
Si desea que la imagen se cargue y muestre una imagen en particular, utilice .src para cargar esa URL de imagen.
Si desea un fragmento de metadatos (en cualquier etiqueta) que pueda contener una URL, utilice data-src o cualquier data-xxx que desea seleccionar.
Documentación de MDN sobre atributos data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
Ejemplo de src en una etiqueta de imagen donde la imagen carga el JPEG por usted y lo muestra:
<img id="myImage" src="http://mydomain.com/foo.jpg">
<script>
var imageUrl = document.getElementById("myImage").src;
</script>
Ejemplo de ‘data-src’ en una etiqueta que no es de imagen donde la imagen aún no está cargada; es solo una pieza de metadatos en la etiqueta div:
<div id="myDiv" data-src="http://mydomain.com/foo.jpg">
<script>
// in all browsers
var imageUrl = document.getElementById("myDiv").getAttribute("data-src");
// or in modern browsers
var imageUrl = document.getElementById("myDiv").dataset.src;
</script>
Ejemplo de data-src en una etiqueta de imagen utilizada como lugar para almacenar la URL de una imagen alternativa:
<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">
<script>
var item = document.getElementById("myImage");
// switch the image to the URL specified in data-src
item.src = item.dataset.src;
</script>
El primero <img /> no es válido – src es un atributo obligatorio. data-src es un atributo que puede ser aprovechado por, digamos, JavaScript, pero no tiene un significado de presentación.