html - tamaño - ¿Cuál es la forma válida de incluir una imagen sin src?
etiqueta img (13)
Tengo una imagen que rellenaré dinámicamente con un src más tarde con javascript pero, para facilitar, quiero que la etiqueta de imagen exista en la carga de la página, pero no mostrar nada. Sé que <img src='''' /> no es válido, ¿cuál es la mejor manera de hacerlo?
Como está escrito en los comentarios, este método es incorrecto.
No encontré esta respuesta antes, pero de acuerdo con W3 Specs, la etiqueta valid src vacía sería un enlace # anclaje.
Ejemplo: src="#" , src="#empty"
La página se valida correctamente y no se realizan solicitudes adicionales.
Descubrí que simplemente configurar el src en una cadena vacía y agregar una regla a su CSS para ocultar el icono de la imagen rota funciona bien.
[src=''''] {
visibility: hidden;
}
He encontrado que usar:
<img src="file://null">
no hará una solicitud y valida correctamente.
Los navegadores simplemente bloquearán el acceso al sistema de archivos local.
Pero puede haber un error que se muestra en el registro de la consola en Chrome, por ejemplo:
Not allowed to load local resource: file://null/
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 que solo tiene 26 bytes: desde http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
Edición basada en 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
Partiendo de la respuesta de Ben Blank, la única forma en que conseguí validar esto en el validador de w3 fue así:
<img src="/./.:0" alt="">`
Recomiendo agregar dinámicamente los elementos, y si usa jQuery u otra biblioteca de JavaScript, es bastante simple:
también mire prepend y append . De lo contrario, si tiene una etiqueta de imagen así y desea validarla, puede considerar el uso de una imagen ficticia, como un gif transparente de 1px o png.
Si bien no existe una forma válida de omitir el origen de una imagen, existen fuentes que no causarán visitas al servidor. Recientemente tuve un problema similar con iframe y determiné que //:0 era 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 páginas HTTPS. Omitir el nombre de host no es necesario, pero lo hace más corto. Finalmente, un puerto de :0 asegura que no se puede realizar una solicitud del servidor (no es un puerto válido, de acuerdo con la especificación).
Esta es la única URL que encontré que no causó visitas 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 usa en una página servida a través de HTTPS. Cualquier otro puerto provocó una conexión de servidor intentada, incluso para direcciones no válidas. (Algunos navegadores simplemente hacen la solicitud no válida y esperan a que finalice el tiempo).
Esto se probó en Chrome, Safari 5, FF 3.6 e IE 6/7/8, pero esperaba que funcionara en cualquier navegador, ya que debería ser la capa de red que mata cualquier intento de solicitud.
Simplemente, me gusta esto:
<img id="give_me_src"/>
Utilice un SVG verdaderamente en blanco, válido y altamente compatible, basado en este article :
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 300x150 px, como lo hace cualquier SVG, pero puede trabajar con eso en los estilos predeterminados de su elemento img , como posiblemente necesite en cualquier caso en la implementación práctica.
Yo personalmente uso un about:blank src y trato con el ícono de imagen roto al establecer la opacidad del elemento img en 0 .
si mantiene el atributo src, el navegador vacío enviará la solicitud a la URL de la página actual, siempre agregue 1 * 1 img transparente en el atributo src si no quiere ninguna URL
src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="
No he hecho esto por un tiempo, pero tuve que pasar por esto mismo una vez.
<img src="about:blank" alt="" />
Es mi favorito - el //:0 uno implica que intentarás hacer 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 prefiero que no se especifique de esa manera cuando probablemente no sea eso lo que quieres decir.
De todos modos, la representación de about:blank es realmente muy rápida en todos los navegadores que probé. 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 solución <img src=''data:... continuación. O si no le importa la validez, pero aún desea evitar las solicitudes superfluas a su servidor, puede hacer <img alt="" /> sin ningún atributo src. Pero eso es HTML NO VÁLIDO, así que elígelo con cuidado.
Página de prueba que muestra un montón de diferentes métodos: http://desk.nu/blank_image.php - servido con todo tipo de diferentes tipos de documento y tipos de contenido. - 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
<img src="invis.gif" />
Donde invis.gif es un gif transparente de un solo píxel. Esto no se romperá en futuras versiones de navegador y ha estado funcionando en navegadores heredados desde los años 90.
png debería funcionar también, 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, validadores como ellos también.