Alternativa de imágenes | Tutorial de desarrollo web

Introducción

En este laboratorio, aprenderemos cómo aplicar estilos al elemento img para mostrar un mensaje de error y la URL de la imagen cuando una imagen no se carga correctamente. Utilizaremos los pseudo-elementos ::before y ::after para crear una alternativa amigable para el usuario en caso de que una imagen no se pueda mostrar. Al final de este laboratorio, serás capaz de mejorar la experiencia del usuario al proporcionar información útil en caso de fallos en la carga de imágenes.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic 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{{"Alternativa para imágenes que no se cargan"}} css/fonts -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} css/text_styling -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} css/margin_and_padding -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} css/width_and_height -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} css/display_property -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} css/positioning -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} css/pseudo_elements -.-> lab-35173{{"Alternativa para imágenes que no se cargan"}} end

Alternativa para imágenes que no se cargan

index.html y style.css ya se han proporcionado en la máquina virtual.

Cuando una imagen no se carga, muestre un mensaje de error al usuario. Para hacer esto, aplique estilos al elemento img como si fuera un contenedor de texto, estableciendo su visualización en bloque y su ancho en 100%. Utilice los pseudo-elementos ::before y ::after para mostrar respectivamente el mensaje de error y la URL de la imagen. Estos elementos solo se mostrarán si la imagen no se carga.

A continuación, se muestra un fragmento de código de ejemplo:

<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;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio Alternativa para imágenes que no se cargan. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.