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

Question

У меня есть агрегатор данных, организовывающий данные из разных источников особым образом.

Иногда изображения, указанные в типе источника, недоступны или источник отказывается их обслуживать.В этом случае я хочу удалить пространство, выделенное для тега изображения.Является ли это возможным?

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

Answer 1

Лучший способ сделать это - использовать функцию onerror. Как то так:

<img src="image_not_found.jpg" onerror="this.style.display = 'none';" alt="">

Подробнее об этом можно узнать здесь http://msdn.microsoft.com/en-us/library/cc197053(v=vs.85).aspx

редактировать

Даже если это будет работать для всех браузеров, использование атрибута onerror сделает ваш HTML недействительным, поскольку он не является частью списка атрибутов img. Статья о плюсах и минусах использования этого атрибута. http://blog.sociomantic.com/2010/07/html-onerror-the-good-the-bad-and-the-ugly/

Answer 2

Самое простое решение, которое я могу придумать: настроить сервер так, чтобы он отправлял обратно изображение размером 1px * 1px вместо 404 ing.

Answer 3

В качестве альтернативы, если вы хотите сделать все это на стороне клиента (и иметь ссылки на изображения на другие серверы, которые вы также не контролируете), вы можете запустить функцию javascript над этими изображениями, чтобы определитьесли они успешно загружены, а если нет, задайте их jsObject.style.display = 'none' для jsObject, представляющего собой каждое не загруженное изображение.

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

Answer 4

Если у вас нет контроля над кодом на стороне сервера, вы можете использовать JavaScript.Поскольку я не вижу «разбитого изображения», которое браузер использует, когда src элемента изображения не работает, я предполагаю, что контейнер просто пуст.

Предполагается, что контейнер изображения имеетКласс под названием .container, вы можете использовать этот фрагмент кода, если у вас есть jQuery:

$(document).ready(function() {

  $('.container').each(function() {
    if ($(this).html() == "") {
      $(this).css('display', 'none');
    }
  });

});

Или еще лучше, только с CSS , все еще предполагая, что элемент контейнера имеет имя классаназывается .container:

.container:empty {
  display: none;
}