简介
在本实验中,我们将学习如何对 img
元素应用样式,以便在图像加载失败时显示错误消息和图像URL。我们将使用 ::before
和 ::after
伪元素为无法显示的图像创建一个用户友好的备用方案。在本实验结束时,你将能够通过在图像加载失败时提供有用信息来增强用户体验。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何对 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服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了“加载失败图像的备用方案”实验。你可以在LabEx中练习更多实验来提升你的技能。