Введение
В этом практическом занятии мы научимся применять стили к элементу img, чтобы отображать сообщение об ошибке и URL-адрес изображения, когда изображение не загружается. Мы будем использовать псевдоэлементы ::before и ::after, чтобы создать удобный запасной вариант для изображений, которые не могут быть отображены. В конце этого практического занятия вы сможете улучшить пользовательский опыт, предоставив полезную информацию в случае неудачной загрузки изображения.
Резервный вариант для изображений, которые не загружаются
В ВМ уже предоставлены index.html и style.css.
Когда изображение не загружается, показывайте пользователю сообщение об ошибке. Для этого применяйте стили к элементу img, как если бы он был текстовым контейнером, задайте для него отображение в виде блока и ширину 100%. Используйте псевдоэлементы ::before и ::after для отображения соответственно сообщения об ошибке и URL-адреса изображения. Эти элементы будут показаны только в случае неудачной загрузки изображения.
Вот пример фрагмента кода:
<img src="https://nowhere.to.be/found.jpg" />
img {
display: block;
width: 100%;
height: auto;
line-height: 2;
position: relative;
text-align: center;
font-family: sans-serif;
font-weight: 300;
}
img::before {
content: "Sorry, this image is unavailable.";
display: block;
margin-bottom: 8px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
Пожалуйста, нажмите на кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Резюме
Поздравляем! Вы завершили практическое занятие "Резервный вариант для изображений, которые не загружаются". Вы можете практиковаться в других практических занятиях в LabEx, чтобы улучшить свои навыки.