una - mostrar imagen en html

Cómo mostrar texto alternativo para una imagen en cromo

Question

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.

  <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 mostrar el texto alternativo para una imagen?

Answer 1

Aquí hay 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 lo he implementado como una extensión de Chrome llamada alt . Debido a que usa jQuery.live , también funciona con contenido cargado dinámicamente. Retiré esta extensión y la eliminé de la tienda de Chrome.

Answer 2

Internet Explorer 7 (y anterior) muestra el valor del atributo alt como información sobre herramientas al pasar el mouse 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

Answer 3

Puedes usar el atributo de 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" />

Answer 4

Sí, es un problema en webkit y también aparece en Chrome: http://code.google.com/p/chromium/issues/detail?id=773 Está allí desde 2008 ... ¡y aún no se ha solucionado!

Estoy usando un fragmento 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 solo quieres algunas imágenes:

addShowAlt("#myImgID");

Answer 5

Si estoy en lo correcto, este es un error en el webkit (de acuerdo con this ). No estoy seguro de si hay mucho que puedas hacer, perdón por la respuesta débil.

Sin embargo, hay un trabajo alrededor del cual puedes usar. Si agrega el atributo de title a su imagen (por ejemplo, title="Image Not Found" ), funcionará.

Answer 6

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. Tuve éxito al reemplazar en src consigo mismo y luego detectar el error:

$(''img'').each(function()
{
    $(this).error(function()
    {
        $(this).replaceWith(this.alt);
    }).attr(''src'',$(this).prop(''src''));
});

Esto, como en la contribución de Alexis, tiene el beneficio de eliminar la imagen img faltante.

Answer 7

Yo uso esto, funciona 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>

Básicamente, lo que el código está haciendo es verificar el archivo . La variable $data se usará con nuestra matriz y luego realizará el cambio deseado. Si no se encuentra, arrojará una excepción.

Answer 8

Use el atributo title en lugar de alt

<img
  height="90"
  width="90"
  src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
  title="Image Not Found"
/>