Как отобразить alt-текст для изображения в хроме

Ответ 1

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

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

Ответ 2

Вы можете использовать атрибут 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" />

Ответ 3

Используйте атрибут 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

Да, это проблема в webkit, а также в хроме: 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");

Ответ 5

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

$(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.

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Чтобы отобразить альтернативный текст отсутствующих изображений, мы должны добавить такой стиль. Я думаю, нет необходимости добавлять дополнительный JavaScript для этого.

.Your_Image_Class_Name {
  font-size: 14px;
}

Это работает для меня. Наслаждаться!!!!

Ответ 9

Вы можете поместить атрибут title в тег. Надеюсь, он будет работать.

<img src="smiley.gif" title="Smiley face" width="42" height="42">

Ответ 10

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

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