¿Cuál es la forma válida de incluir una imagen sin src?

Tengo una imagen que poblaré dinámicamente con un src más tarde con javascript, pero para mayor facilidad quiero que la etiqueta de la imagen exista en la carga de la página, pero no mostrar nada. Sé <img src='' />que no es válido, ¿cuál es la mejor manera de hacer esto?

Aunque no existe una forma válida para omitir la fuente de una imagen, no son fuentes que no causará golpes servidor. Recientemente tuve un problema similar con iframesy decidí //:0ser la mejor opción. ¡No realmente!

Comenzar con //(omitir el protocolo) hace que se use el protocolo de la página actual, evitando advertencias de "contenido inseguro" en las páginas HTTPS. No es necesario omitir el nombre de host, pero lo hace más corto. Finalmente, un puerto de :0asegura que no se pueda realizar una solicitud del servidor (no es un puerto válido, según las especificaciones).

Esta es la única URL que encontré que no causó aciertos del servidor ni mensajes de error en ningún navegador. La opción habitual - javascript:void(0)causará una advertencia de "contenido inseguro" en IE7 si se usa en una página servida a través de HTTPS. Cualquier otro puerto provocó un intento de conexión del servidor, incluso para direcciones no válidas. (Algunos navegadores simplemente realizan la solicitud no válida y esperan a que se agote el tiempo de espera).

Esto se probó en Chrome, Safari 5, FF 3.6 e IE 6/7/8, pero espero que funcione en cualquier navegador, ya que debería ser la capa de red que mata cualquier intento de solicitud.

Otra opción es incrustar una imagen en blanco. Cualquier imagen que se adapte a su propósito funcionará, pero el siguiente ejemplo codifica un GIF de solo 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="" />

Editar según el comentario a continuación:

Por supuesto, debe considerar los requisitos de soporte de su navegador. No hay soporte para IE7 o menos es notable. http://caniuse.com/datauri

En estos días, en mi humilde opinión, la mejor manera corta, sensata y válida para un src de img vacío es así:

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

El segundo ejemplo muestra "Texto alternativo" (más el icono de imagen rota en Chrome e IE).

"data:,"es un URI válido Un tipo de medio vacío predeterminado es text/plain. Por lo tanto, representa un archivo de texto vacío y es equivalente a"data:text/plain,"

Recomiendo agregar dinámicamente los elementos, y si usa jQuery u otra biblioteca de JavaScript, es bastante simple:

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

También mira prependy append. De lo contrario, si tiene una etiqueta de imagen como esa y desea validarla, puede considerar usar una imagen ficticia, como un gif o png transparente de 1 px.

No he hecho esto en mucho tiempo, pero tuve que pasar por lo mismo una vez.

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

Es mi favorito: el //:0 primero implica que intentará establecer una conexión HTTP / HTTPS con el servidor de origen en el puerto cero (¿el puerto tcpmux?), Que probablemente sea inofensivo, pero prefiero no hacerlo de todos modos. Diablos, el navegador puede ver el puerto cero y ni siquiera enviar una solicitud. Pero aún así prefiero que no se especifique de esa manera cuando probablemente eso no sea lo que quieres decir.

De todos modos, la representación de about:blankes realmente muy rápida en todos los navegadores que probé. Simplemente lo tiré al validador W3C y no se quejó, por lo que incluso podría ser válido.

Editar : no hagas eso; no funciona en todos los navegadores (mostrará un icono de 'imagen rota' como se señala en los comentarios para esta respuesta). Use la <img src='data:...solución a continuación. O si no le importa la validez, pero aún así quiere evitar solicitudes superfluas a su servidor, puede hacerlo <img alt="" />sin ningún atributo src. Pero eso es inválido HTML VÁLIDO, así que selecciónalo con cuidado.

Página de prueba que muestra un montón de métodos diferentes: http://desk.nu/blank_image.php , que se sirve con todo tipo de diferentes tipos de contenido y doctypes. - como se menciona en los comentarios a continuación, use la nueva página de prueba de Mark Ormston en: http://memso.com/Test/BlankImage.html

Como está escrito en los comentarios, este método es incorrecto.

No encontré esta respuesta antes, pero según la etiqueta vacía válida de W3 Specssrc sería un enlace de anclaje #.

Ejemplo: src="#",src="#empty"

La página se valida con éxito y no se realiza ninguna solicitud adicional.

Descubrí que simplemente establecer el src en una cadena vacía y agregar una regla a su CSS para ocultar el icono de imagen rota funciona bien.

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

si mantiene el atributo src vacío, el navegador enviará una solicitud a la URL de la página actual, siempre agregue 1 * 1 img transparente en el atributo src si no desea ninguna url

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

He encontrado que usando:

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

no hará una solicitud y valida correctamente.

Los navegadores simplemente bloquearán el acceso al sistema de archivos local.

Pero podría aparecer un error en el registro de la consola en Chrome, por ejemplo:

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

Utilice un SVG realmente en blanco, válido y altamente compatible, basado en este artículo :

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

Su tamaño predeterminado será de 300x150px como lo hace cualquier SVG, pero puede trabajar con eso en los imgestilos predeterminados de su elemento, como posiblemente necesitaría en cualquier caso en la implementación práctica.

Partiendo de la respuesta de Ben Blank, la única forma en que obtuve esto para validar en el validador w3 fue así:

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

Personalmente uso about:blank srcy trato con el icono de imagen rota configurando la opacidad del imgelemento en 0.

<img src="invis.gif" />

Donde invis.gif es un gif transparente de un solo píxel. Esto no se romperá en futuras versiones del navegador y ha estado funcionando en navegadores heredados desde los años 90.

png también debería funcionar, pero en mis pruebas, el gif tenía 43 bytes y el png tenía 167 bytes, por lo que ganó el gif.

ps no olvides una etiqueta alt, a los validadores también les gustan.

Simplemente, así:

<img id="give_me_src"/>