Como ocultar silenciosamente o ícone “Imagem não encontrada” quando a imagem fonte src não for encontrada

Você sabe como ocultar o ícone clássico “Imagem não encontrada” de uma página HTML renderizada quando um arquivo de imagem não é encontrado?

Qualquer método de trabalho usando JavaScript / jQuery / CSS?

Você pode usar o onerrorevento em JavaScript para agir quando uma imagem falha ao carregar:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

No jQuery (já que você perguntou):

$("#myImg").error(function () { 
    $(this).hide(); 
});

Ou para todas as imagens:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Você deve usar em visibility: hiddenvez de .hide()se esconder as imagens pode alterar o layout. Muitos sites na web usam uma imagem padrão "sem imagem", apontando o srcatributo para essa imagem quando o local da imagem especificado não está disponível.

<img onerror='this.style.display = "none"'>

Modifiquei ligeiramente a solução sugerida por Gary Willoughby, porque mostra brevemente o ícone da imagem quebrada. Minha solução:

    <img src="..." style="display: none" onload="this.style.display=''">

Na minha solução, a imagem está inicialmente oculta e é exibida apenas quando é carregada com sucesso. Isso tem uma desvantagem: os usuários não verão imagens carregadas pela metade. E se o usuário desabilitou JS, então ele nunca verá nenhuma imagem

Para ocultar todos os erros de imagem, basta adicionar este JavaScript na parte inferior da página (antes da tag de fechamento do corpo):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Pode ser um pouco tarde para responder, mas aqui está minha tentativa. Quando enfrentei o mesmo problema, resolvi usando um div do tamanho da imagem e definindo a imagem de fundo para este div. Se a imagem não for encontrada, o div é apresentado como transparente, então tudo é feito silenciosamente, sem código java-script.

Fazendo uma pesquisa rápida sobre a resposta de Andy E , não é possível live()vincular error.

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

Então você tem que ir como

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

vinculando diretamente o error event handlerna criação de um novo elemento.

Eu descobri um método bacana para fazer exatamente isso, enquanto ainda ng-srcestou funcional ao usar a diretiva em Angular.js e assim ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

é basicamente um GIF transparente mais curto (como visto http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20The% 20smallest% 20transparent% 20pixel.html )

é claro que esse gif pode ser mantido dentro de alguma variável global para não bagunçar os modelos.

<script>
  window.fallbackGif = "..."
</script>

E use

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

etc.

Basta usar css simples

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}