12

Existe alguma forma de carregar uma imagem padrão, usando apenas HTML, caso o primeiro src="" não encontre o arquivo?

<img src="ola_mundo.png" alt="Olá Mundo"> // Existe algum atributo para isso?
0

2 Respostas 2

9

Outros fallbacks mais simples que pode experimentar, com javascript:

<img src="imagem-nao-existe.png" onerror="this.src='fallback.png'">

Um exemplo no jsfiddle do @Randrade: https://jsfiddle.net/wts9e4xb/1/

Sem error
<br>

<img src="http://previews.123rf.com/images/otnaydur/otnaydur1103/otnaydur110300040/9112843-Gold-coins-stack-over-scater-coins-Stock-Photo-bar.jpg" alt="Olá Mundo" onerror="this.onerror=null;this.src='http://logz.io/wp-content/uploads/2016/02/stack-overflow-logo.png';"
>

<br>Com error
<br>

<img src="loading.gif" alt="Olá Mundo" onerror="this.src='http://logz.io/wp-content/uploads/2016/02/stack-overflow-logo.png';" >

Com CSS (requer tamanho fixo):

<style>
.image {
     width: 620px;
     height: 480x;
}
</style>

<div class="image" style="background: url(foto-nao-existe.png), url(fallback.png)"></div>
1
  • 1
    Bom, mesmo usando JS acredito que ainda sim seja a melhor solução. Commented 23/11/2016 às 10:49
6

Encontrei essa solução...

<object data="https://img.com.br/no_existe.jpg" type="image/png">
  <img src="http://farm2.static.flickr.com/1094/984405951_34580c3cb9.jpg" />
</object>

Nessa pergunta

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .