Как я могу использовать свое собственное изображение, когда сайт возвращает поддельное изображение с кодом ответа 404

Question

Это немного отличается от обычного вопроса о том, как изящно обрабатывать испорченные изображения в javascript.

У меня уже есть обработчик ошибки на изображении, который заменит его на пользовательское изображение "image not found".

Однако есть сайт, который, когда вы запрашиваете их изображение, возвращает код ответа 404, но в теле ответа фактически возвращает изображение со своим собственным нестандартным изображением. По-видимому, в этом случае событие img onerror не срабатывает, потому что изображение сохраняется, несмотря на код ошибки. (Я тестировал на FireFox, IE8 и Chrome)

Вот пример изображения, о котором идет речь: http://images.cars.com/preview/DMI/186445/C2121.jpg

Есть ли у кого-нибудь идеи, как обнаружить этот случай в javascript и заменить их динамическое изображение 404 нашим собственным? Спасибо!

Answer 1

Одно простое решение, которое приходит на ум, - это не загружать изображение сразу, а затем использовать javascript в document.ready или window.onload, чтобы получить изображение. Затем, если статус 404, поместите свой собственный noImageAvailable.png в изображение. Если вы получили 200 или другой статус OK, поместите полученное изображение туда. Однако с этим есть проблема.

Политика одного и того же происхождения не разрешает сценариям получать доступ к содержимому между доменами. Таким образом, вы не сможете просто использовать javascript для получения этого файла. Для этого есть пара обходных путей, один из которых я объясню здесь (не обязательно лучший, просто вариант).

Преимущество этого метода в том, что javascript может просто запросить файл и отобразить результат. Недостатком является более внутренний код. Просто сделайте запрос javascript на изображение с вашего сервера (AJAX) и вставьте результат в img. На стороне сервера для этого запроса откройте сокет TCP для сервера, на котором размещен образ (вам нужно будет разрешить IP-адрес), и отправьте HTTP-запрос GET для образа. Если изображение возвращается нормально, отправьте его в ответ на AJAX. Если нет, отправьте свой собственный noImageAvailable.png обратно.

Поскольку это может занять некоторое время, вы можете сначала заменить изображение на изображение загрузки по умолчанию, пока не вернется AJAX.

Учебник по AJAX

Информация протокола HTTP

Я бы добавил кое-что о программировании сокетов для вас, но я не знаю, какой бэкэнд вы используете.