¿Cuál es la forma válida de incluir una imagen sin src?
Tengo una imagen que completaré dinámicamente con un src más adelante con javascript, pero para facilitarlo quiero que la etiqueta de imagen exista al cargar la página pero que no muestre nada. Sé <img src='' />que no es válido, ¿cuál es la mejor manera de hacer esto?
Otra opción es incrustar una imagen en blanco. Cualquier imagen que se adapte a su propósito servirá, 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, debes considerar los requisitos de soporte de tu navegador. No se destaca ninguna compatibilidad con IE7 o menos. http://caniuse.com/datauri
Si bien no existe una forma válida de omitir la fuente de una imagen, existen fuentes que no causarán visitas al servidor. Recientemente tuve un problema similar con iframes y determiné //:0que era la mejor opción. ¡No realmente!
Comenzar con //(omitiendo el protocolo) hace que se utilice el protocolo de la página actual, lo que evita advertencias de "contenido inseguro" en las páginas HTTPS. No es necesario omitir el nombre del host, pero lo acorta. Finalmente, un puerto de :0garantiza que no se pueda realizar una solicitud al servidor (no es un puerto válido, según la especificación).
Esta es la única URL que encontré que no provocó accesos al servidor ni mensajes de error en ningún navegador. La opción habitual — javascript:void(0)— provocará una advertencia de "contenido inseguro" en IE7 si se utiliza en una página servida a través de HTTPS. Cualquier otro puerto provocó un intento de conexión al servidor, incluso para direcciones no válidas. (Algunos navegadores simplemente realizarían la solicitud no válida y esperarían a que expire el tiempo de espera).
Esto se probó en Chrome, Safari 5, FF 3.6 e IE 6/7/8, pero esperaría que funcionara en cualquier navegador, ya que debería ser la capa de red la que elimine cualquier intento de solicitud.
En estos días, en mi humilde opinión, la mejor forma breve, sensata y válida para un img src vacío es así:
<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">
El segundo ejemplo muestra "Texto alternativo" (más un ícono de imagen rota en Chrome e IE).
"data:,"es un URI válido. Un tipo de medio vacío tiene por defecto text/plain. Entonces representa un archivo de texto vacío y es equivalente a"data:text/plain,"
OT: Todos los navegadores entienden el formato simple
alt. Puede omitirlo ="", está implícito según la especificación HTML.
Utilice un SVG verdaderamente en blanco, válido y altamente compatible, según 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á 300x150px como lo hace cualquier SVG, pero puede trabajar con eso en los imgestilos predeterminados de su elemento, como posiblemente lo necesite en cualquier caso en la implementación práctica.
Recomiendo agregar dinámicamente los elementos, y si usas 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, entonces podría considerar usar una imagen ficticia, como un gif transparente de 1 px o un png.
