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

Question

Изображение с неверным источником отображает альтернативный текст в 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"/>

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

Answer 1

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

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

Answer 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" />

Answer 3

Вот простой обходной путь в 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.

Answer 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");

Answer 5

Использовать атрибут заголовка вместо alt

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

Answer 6

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

Answer 7

Различные браузеры (неправильно) обрабатывают это по-разному. Использование заголовка (старый стандарт IE) не особенно уместно, поскольку атрибут заголовка является эффектом наведения мыши. Представленное выше решение jQuery (Алексис) кажется правильным, но я не думаю, что «ошибка» возникает в той точке, где ее можно поймать. Я добился успеха, заменив src на себя, а затем перехватил сообщение об ошибке:

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

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

Answer 8

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

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

Answer 9

Я использую это, он работает с 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 будет использоваться с нашим массивом, а затем фактически внесет желаемое изменение.Если он не найден, он выдаст исключение.