Почему элементы изображения и картинки отображают изображения, несмотря на статус http 404? - PullRequest
Новая
       73

Почему элементы изображения и картинки отображают изображения, несмотря на статус http 404?

0 голосов
/ 25 октября 2019

Следующий запрос возвращает код состояния HTTP 404, но также content-type: image/jpeg и действительные данные JPEG в теле ответа:

https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg

Если вы установите его как src изображения, изображение все равно будет отображаться. Более того, событие onerror не вызывается, поэтому я не могу использовать onerror="this.src=this.src.replace('maxres', 'sd')" для запуска отката.

Это поведение согласованно в Firefox / Chrome / Edge, поэтому мне интересно 1)если это что-то определено в стандартах ? Или это на самом деле ошибка, которая существует во всех основных браузерах?

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

<h3>Plain image element:</h3>
<img src="https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg" onerror="this.src=this.src.replace('maxres', 'sd')">

<h3>Picture element:</h3>
<picture>
  <source media="(max-width: 640px)" srcset="https://img.youtube.com/vi/lXMskKTw3Bc/sddefault.jpg">
  <source media="(max-width: 480px)" srcset="https://img.youtube.com/vi/lXMskKTw3Bc/hqdefault.jpg">
  <source media="(max-width: 320px)" srcset="https://img.youtube.com/vi/lXMskKTw3Bc/mqdefault.jpg">
  <source srcset="https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg">
  <img src="https://img.youtube.com/vi/lXMskKTw3Bc/sddefault.jpg" type="image/jpeg">
</picture>

<h3>expected output:</h3>
<img src="https://img.youtube.com/vi/lXMskKTw3Bc/sddefault.jpg">

2) Есть ли способ обойти это и вернуться к следующему меньшему размеру изображения, который не приводит к статусу 404, предпочтительно без использования JavaScript ?

1 Ответ

0 голосов
/ 25 октября 2019

Спасибо @Tyler Roper за его комментарий:

В документации указано, что onerror генерируется, когда изображение "не загружается" ,В вашем случае изображение успешно загружено;это просто сопровождается 404, уведомляющим вас, что это не изображение, которое вы первоначально запрашивали.

Для моего конкретного случая я решил это следующим образом: 

<img
  src="https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg"
  onload="if (this.naturalWidth < 1280) { this.src = this.src.replace('maxres', 'sd') }">

Итак, сначала загружается maxresdefault, который обычно должен иметь ширину не менее 1280 пикселей. Если оно меньше, источник изображения изменяется на sddefault.

...