La imagen con fuente no válida muestra un texto alternativo en Firefox pero no en cromo a menos que se ajuste el ancho de una imagen.Cómo mostrar texto alternativo para una imagen en cromo
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Image Not Found"/>
¿Cómo visualizar el texto alternativo para una imagen?
Si estoy en lo cierto, esto es un error en webkit (según this). No estoy seguro de si hay mucho que puedas hacer, perdón por la respuesta débil.
Hay, sin embargo, un trabajo que puede usar. Si agrega el atributo title a su imagen (por ejemplo, title="Image Not Found"), funcionará.
Intenté title = "xyz", pero no funcionó para mí – Girish
, puede que necesite agregarle alto y ancho: http://jsfiddle.net/AAyz4/ – Prisoner
@Prisoner, 
, no . El ancho y la altura no hacen diferencia. Además, src no debe estar vacío u omitido, en la práctica, nunca lo es (y esa es la única razón por la cual su ejemplo funcionó). –
Puede usar el atributo title.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />
Uso título atributo alt en lugar de
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>
por favor explique por qué Use el atributo de título en lugar de alt – sandeep
tenemos que usar tanto el título como alt para la compatibilidad del navegador ya que los diferentes navegadores consideran un atributo diferente en este caso title/alt –
@Harsh sí, sí. Exactamente estaba probando en Google Chrome. Publiqué el código de acuerdo con eso. Pero tenemos que usar ambos para múltiples navegadores. – Sukhjeevan
Sí, es un problema de WebKit y también informó de cromo: http://code.google.com/p/chromium/issues/detail?id=773 Está ahí desde el año 2008 ... y todavía no fija !!
Estoy usando una pieza de javacsript y jQuery para abrirme camino en esto.
function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");
Si sólo desea uno algunas imágenes:
addShowAlt("#myImgID");
No sé por qué sigo teniendo este problema en Chrome, pensarías que esto sería algo importante de solucionar, pero tu código funcionó (una vez envuelto en un bloque domready. Así que gracias. – Kzqai
puede proporcionar su solución en plunker o jfiddle por favor –
Este error parece estar todavía en 2016. ¿Puede su solución javascript se "convirtió" en una extensión de Chrome o un boomarklet por instante -¿activación? – jumpjack
Aquí es una solución simple en jQuery. Puede implementarlo como un script de usuario para aplicarlo a cada página que ve.
$(function() {
$('img').live('mouseover', function() {
var img = $(this); // cache query
if (img.title) {
return;
}
img.attr('title', img.attr('alt'));
});
});
También he implementado esto como una extensión de Chrome llamado alt. Debido a que usa He retirado esta extensión y la he quitado de la tienda de Chrome.jQuery.live, también funciona con contenido cargado dinámicamente.
utilizo esto, trabaja con php ...
<span><?php
if (file_exists("image/".$data['img_name'])) {
?>
<img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
<?php
}else{
echo "Image Not Found";
}>?
</span>
Esencialmente lo que el código está haciendo, es la comprobación de la archivo. La variable $data se usará con nuestra matriz y luego realizará el cambio deseado. Si no se encuentra, arrojará una excepción.
Varios navegadores (mis) manejan esto de varias maneras. El uso del título (un antiguo "estándar" de IE) no es particularmente apropiado, ya que el atributo de título es un efecto de mouseover. La solución jQuery anterior (Alexis) parece estar en el camino correcto, pero no creo que el 'error' ocurra en un punto en el que podría ser capturado. He tenido éxito mediante la sustitución en el src consigo mismo, y luego coger el error:
$('img').each(function()
{
$(this).error(function()
{
$(this).replaceWith(this.alt);
}).attr('src',$(this).prop('src'));
});
Este, como en la contribución Alexis, tiene la ventaja de eliminar la imagen img faltante.
Internet Explorer 7 (y versiones anteriores) muestra el valor del atributo alt como información sobre herramientas al pasar el ratón sobre la imagen. Este NO es el comportamiento correcto, de acuerdo con la especificación HTML. El atributo de título se debe usar en su lugar. Fuente: http://www.w3schools.com/tags/att_img_alt.asp
¿Qué versión de Chrome está usando? Porque, de acuerdo con http://code.google.com/p/chromium/issues/detail?id=16734, esto debería haber sido resuelto. –
¡Esto todavía parece ser un problema en Chrome 29 (más de 2 años)! A menos que el ancho del elemento sea lo suficientemente amplio como para mostrar el texto alternativo en su totalidad, en una línea, ¡entonces no aparece el texto alternativo !? – MrWhite
... y el elemento necesita tener algo de altura. Al menos 44px en mis pruebas. – MrWhite