Quais são todas as diferenças entre os atributos src e data-src?

Quais são as diferenças e consequências (boas e ruins) de usar o atributo data-srcou srcda imgtag? Posso obter os mesmos resultados usando os dois? Em caso afirmativo, quando deve ser usado cada um deles?

Os atributos srce data-srcnão têm nada em comum, exceto que ambos são permitidos pelo HTML5 CR e ambos contêm as letrassrc . Tudo o mais é diferente.

O srcatributo é definido nas especificações HTML e tem um significado funcional.

O data-srcatributo é apenas um do conjunto infinito de data-*atributos, que não têm significado definido, mas podem ser usados ​​para incluir dados invisíveis em um elemento, para uso em scripts (ou estilos).

Se você deseja que a imagem carregue e exiba uma imagem específica, use .srcpara carregar o URL dessa imagem.

Se você quiser um pedaço de metadados (em qualquer tag) que pode conter um URL, use data-srcou qualquer um data-xxxque você queira selecionar.

Documentação MDN sobre atributos data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Exemplo de srcem uma tag de imagem onde a imagem carrega o JPEG para você e o exibe:

<img id="myImage" src="http://mydomain.com/foo.jpg">

<script>
    var imageUrl = document.getElementById("myImage").src;
</script>

Exemplo de 'data-src' em uma tag sem imagem em que a imagem ainda não foi carregada - é apenas um pedaço de metadados na tag 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>

Exemplo de data-srcem uma tag de imagem usada como um local para armazenar o URL de uma imagem 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>

O primeiro <img />é inválido - srcé um atributo obrigatório. data-srcé um atributo que pode ser alavancado por, digamos, JavaScript, mas não tem significado de apresentação.

O atributo data-src faz parte da coleção de atributos data- * introduzida no HTML5. data-src nos permite armazenar dados extras que não têm significado para o navegador, mas que podem ser usados ​​por código Javascript ou regras CSS.

Bem, o atributo data src é usado apenas para vincular dados, por exemplo ASP.NET ...

Atributo src W3School

Atributo datasrc do MSDN