Qual é a maneira válida de incluir uma imagem sem src?

Eu tenho uma imagem que preencherei dinamicamente com um src posteriormente com javascript, mas para facilitar, quero que a tag de imagem exista no carregamento de página, mas não exiba nada. Eu sei que <img src='' />é inválido, então qual é a melhor maneira de fazer isso?

Embora não exista uma forma válida para omitir fonte de uma imagem, não são fontes que não irá causar acertos do servidor. Recentemente, tive um problema semelhante com se iframedeterminado //:0a ser a melhor opção. Não mesmo!

Iniciar com //(omitir o protocolo) faz com que o protocolo da página atual seja usado, impedindo avisos de "conteúdo não seguro" nas páginas HTTPS. Ignorar o nome do host não é necessário, mas o torna mais curto. Finalmente, uma porta :0garante que uma solicitação do servidor não possa ser feita (não é uma porta válida, de acordo com as especificações).

Este é o único URL que encontrei que não causou ocorrências no servidor ou mensagens de erro em nenhum navegador. A escolha usual - javascript:void(0)- causará um aviso de "conteúdo não seguro" no IE7 se usado em uma página veiculada via HTTPS. Qualquer outra porta causou uma tentativa de conexão com o servidor, mesmo para endereços inválidos. (Alguns navegadores simplesmente fazem a solicitação inválida e aguardam o tempo limite.)

Isso foi testado no Chrome, Safari 5, FF 3.6 e IE 6/7/8, mas espero que funcione em qualquer navegador, pois deve ser a camada de rede que mata qualquer tentativa de solicitação.

Outra opção é incorporar uma imagem em branco. Qualquer imagem que se adapta ao seu propósito vai fazer, mas o exemplo a seguir codifica uma GIF que é apenas 26 bytes - de http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />

Edite com base no comentário abaixo:

Obviamente, você deve considerar os requisitos de suporte do navegador. Nenhum suporte para o IE7 ou menos é notável. http://caniuse.com/datauri

Atualmente, a IMHO, a melhor maneira curta, sã e válida para um img src vazio é a seguinte:

<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">

O segundo exemplo exibe "Texto alternativo" (mais o ícone de imagem quebrada no Chrome e IE).

"data:,"é um URI válido. O tipo de mídia vazio é padronizado como text/plain. Portanto, representa um arquivo de texto vazio e é equivalente a"data:text/plain,"

Eu recomendo adicionar dinamicamente os elementos e, se estiver usando jQuery ou outra biblioteca JavaScript, é bastante simples:

• http://api.jquery.com/appendTo/
• http://api.jquery.com/prependTo/
• http://api.jquery.com/html/

também olhe prepende append. Caso contrário, se você tiver uma tag de imagem assim e quiser validá-la, considere usar uma imagem fictícia, como um gif transparente de 1px ou png.

Não faço isso há algum tempo, mas tive que passar pela mesma coisa uma vez.

<img src="about:blank" alt="" />

É o meu favorito - o //:0que implica que você tentará fazer uma conexão HTTP / HTTPS com o servidor de origem na porta zero (a porta tcpmux?) - que provavelmente é inofensiva, mas prefiro não fazer isso. Caramba, o navegador pode ver a porta zero e nem mesmo enviar uma solicitação. Mas eu ainda prefiro que não seja especificado dessa maneira quando provavelmente não é isso que você quer dizer.

De qualquer forma, a renderização about:blanké realmente muito rápida em todos os navegadores que testei. Acabei de jogá-lo no validador W3C e ele não reclamou, portanto pode até ser válido.

Edit : Não faça isso; ele não funciona em todos os navegadores (mostrará um ícone de 'imagem quebrada', conforme apontado nos comentários para esta resposta). Use a <img src='data:...solução abaixo. Ou, se você não se importa com a validade, mas ainda deseja evitar solicitações supérfluas para o servidor, pode fazer isso <img alt="" />sem nenhum atributo src. Mas isso é HTML INVÁLIDO, então escolha com cuidado.

Página de teste mostrando vários métodos diferentes: http://desk.nu/blank_image.php - servido com todos os tipos de diferentes tipos de documentos e tipos de conteúdo. - conforme mencionado nos comentários abaixo, use a nova página de teste de Mark Ormston em: http://memso.com/Test/BlankImage.html

Conforme escrito nos comentários, esse método está errado.

Eu não encontrei essa resposta antes, mas de acordo com a tag vazia válida do W3 Specssrc seria um link de âncora #.

Exemplo: src="#",src="#empty"

A página valida com sucesso e nenhuma solicitação extra é feita.

Eu descobri que simplesmente definir o src como uma string vazia e adicionar uma regra ao seu CSS para ocultar o ícone da imagem quebrada funciona muito bem.

[src=''] {
    visibility: hidden;
}

se você mantiver o atributo src, o navegador vazio enviará uma solicitação para o URL da página atual, adicione sempre 1 * 1 img transparente no atributo src, se não desejar nenhum URL

src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="

Eu descobri que usando:

<img src="file://null">

não fará uma solicitação e valida corretamente.

Os navegadores simplesmente bloquearão o acesso ao sistema de arquivos local.

Mas pode haver um erro exibido no log do console no Chrome, por exemplo:

Not allowed to load local resource: file://null/

Use um SVG verdadeiramente em branco, válido e altamente compatível, com base neste artigo :

src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"

O tamanho padrão será 300x150px, como qualquer SVG, mas você pode trabalhar com isso nos imgestilos padrão do elemento, como seria possível em qualquer caso na implementação prática.

Com base na resposta de Ben Blank, a única maneira que consegui validar isso no validador w3 era assim:

<img src="/./.:0" alt="">`

Eu pessoalmente uso about:blank srce lida com o ícone de imagem quebrada, definindo a opacidade do imgelemento como 0.

<img src="invis.gif" />

Onde invis.gif é um gif transparente de um único pixel. Isso não será interrompido nas versões futuras dos navegadores e funciona em navegadores herdados desde os anos 90.

O png também deve funcionar, mas nos meus testes, o gif era de 43 bytes e o png era de 167 bytes.

ps não esqueça uma tag alt, validadores como eles também.

Simplesmente, assim:

<img id="give_me_src"/>