Сохранить размер изображения, если путь указан неверно

Question

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

.clsSize {
  width: 100px;
  height: 100px;
}

<img src="wrong-path.jpg" class="clsSize" style="width: 100px; height: 100px;" width="100" height="100">

Answer 1

Вам нужно немного JavaScript, чтобы сделать эту работу.У изображений возникает событие, называемое onError, когда изображение не может быть загружено, которым вы можете воспользоваться.Я полагаю, что это следует использовать только для протокола HTTP, но может работать или не работать для файловых протоколов.

В jQuery код выглядит следующим образом:

$(document).ready(function () {
  $('img').error(function () {
    $(this).attr('src', 'missing.png');
  });
});

А в ванильном JavaScript,это:

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
  imgs[0].onerror = function () {
    this.src = "missing.png";
  };

Рабочий фрагмент

$(function () {
  $('img').error(function () {
    $(this).attr({
      'src': 'https://i.imgur.com/9q6NxKo.png',
      "width": 100
    });
  });
});

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<img src="hello.png" />

Я создал огромную статью в блоге, в которой объясняется, как это сделать, и демонстрацию.Вы можете взглянуть на Лучшая обработка ссылок на неработающие изображения .

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