Как отображать альтернативный текст для изображения в Chrome

изображение с недопустимым источником отображает альтернативный текст в Firefox, но не в chrome, Если ширина изображения не регулируется.

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

Как отобразить текст alt для изображения?

8 67
html google-chrome

8 ответов:

Если я прав, это ошибка в webkit (согласно этой). Я не уверен, что есть много, что вы можете сделать, извините за слабый ответ.

есть, однако, работа, вокруг которой вы можете использовать. Если вы добавите title атрибут к вашему изображению (например title="Image Not Found") это сработает.

79

можно использовать

22

Да это проблема в webkit, а также сообщается в chromium:http://code.google.com/p/chromium/issues/detail?id=773 Он там с 2008 года... и все равно не исправлено!!

Я использую кусок javacsript и jQuery, чтобы обойти это.

function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");

Если вы хотите только один некоторые изображения:

addShowAlt("#myImgID");
4

используйте атрибут title вместо alt

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

вот простой обходной путь в jQuery. Вы можете реализовать его как пользовательский скрипт, чтобы применить его к каждой странице, которую вы просматриваете.

$(function () {
  $('img').live('mouseover', function () {
    var img = $(this); // cache query
    if (img.title) {
      return;
    }
    img.attr('title', img.attr('alt'));
  });
});

Я также реализовал это как расширение Chrome под названием alt. Потому что он использует jQuery.live, Он также работает с динамически загруженным контентом.Я удалил это расширение и удалил его из магазина Chrome.

4

различные браузеры (mis)обрабатывают это по-разному. Использование title (старый IE 'standard') не особенно подходит, так как атрибут title является эффектом наведения курсора мыши. Решение jQuery выше (Alexis) кажется на правильном пути, но я не думаю, что "ошибка" возникает в точке, где она может быть поймана. У меня был успех, заменив в src на себя, а затем поймав ошибку:

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

Это, как и в вкладе Алексиса, имеет преимущество удаления отсутствует изображение img.

1

Internet Explorer 7 (и более ранние версии) отображает значение атрибута alt в виде всплывающей подсказки при наведении курсора мыши на изображение. Это не правильное поведение, согласно спецификации HTML. Вместо этого следует использовать атрибут title. Источник: http://www.w3schools.com/tags/att_img_alt.asp

1

Я использую это, он работает с 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>

по существу то, что делает код, проверяет File. Элемент $data переменная будет использоваться с нашим массивом, то на самом деле сделать желаемое изменение. Если он не найден, он будет бросать исключение.

-2