加载失败图像的备用方案

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习如何对 img 元素应用样式,以便在图像加载失败时显示错误消息和图像URL。我们将使用 ::before::after 伪元素为无法显示的图像创建一个用户友好的备用方案。在本实验结束时,你将能够通过在图像加载失败时提供有用信息来增强用户体验。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/fonts -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/text_styling -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/margin_and_padding -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/width_and_height -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/display_property -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/positioning -.-> lab-35173{{"`加载失败图像的备用方案`"}} css/pseudo_elements -.-> lab-35173{{"`加载失败图像的备用方案`"}} end

加载失败图像的备用方案

虚拟机中已提供 index.htmlstyle.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中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程