Saludos comunidad
Tengo dificultad para que me carguen las imágenes, cargué la carpeta de img, pero a la hora de poner el link de referencia no me suben las imágenes. por ejemplo con el logo de Apeperia, no me carga.
Me podrían ayudar por favor encontrando el error.
Muchas gracias !
¡Hola Vanesa!
Entiendo que estás teniendo dificultades para cargar las imágenes en tu proyecto. Es posible que el problema se deba a un error en la ruta de la imagen o a un problema de permisos en la carpeta de imágenes.
Para solucionar este problema, te recomendaría que verifiques lo siguiente:
Asegúrate de que la ruta de la imagen sea correcta. Puedes hacerlo verificando la ubicación de la imagen en tu carpeta de imágenes y asegurándote de que la ruta que estás utilizando en tu código sea la correcta. Por ejemplo, si la imagen se encuentra en una subcarpeta llamada "img" dentro de tu proyecto, la ruta sería algo como "img/nombre_de_la_imagen.jpg".
Verifica los permisos de la carpeta de imágenes. Asegúrate de que la carpeta de imágenes tenga los permisos adecuados para que el servidor pueda acceder a ella y cargar las imágenes. Puedes hacerlo revisando los permisos de la carpeta en tu sistema de archivos.
Si después de verificar estos puntos aún tienes problemas para cargar las imágenes, sería útil que compartieras el código que estás utilizando para cargar las imágenes, así como la estructura de tu proyecto. De esta manera, podré brindarte una ayuda más específica.
¡Espero haber ayudado y buenos estudios!
Hola Rafeala!
Muchas gracias por ayudarme con el error; extiendo mis disculpas pero no comprendo cómo o de qué manera puedo revisar los permisos de la carpeta?. Ya utilicé la recomendación del enlace del código pero al parecer no lo reconoce :( .
De hecho, ninguna imagen me carga, es decir tengo problemas para que el Visual Studio Code me deme identifique la carpeta de img.
Index:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width-device-width initial-scale=1.0">
<meta charset="UTF-8">
<title>Home | Apeperia</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<link href="reset.css" rel="stylesheet">
<link href="head.css" rel="stylesheet">
<link href="llamada.css" rel="stylesheet">
<link href="bases.css" rel="stylesheet">
<link href="destacados.css" rel="stylesheet">
<link href="img" rel="img">
</head>
<body>
<header class="head container">
<img src="img/Logo_apepeperias.svg" alt="Logo de Apeperia">
<nav class="head__navegacion">
<ul>
<li class="head__enlace"><a href="#">Sobre</a></li>
<li class="head__enlace"><a href="#">Planes</a></li>
<li class="head__enlace"><a href="#">Blog</a></li>
<li class="head__enlace"><a href="#">Destacados</a></li>
<li class="head__enlace"><a href="#">Institucional</a></li>
<li class="head__enlace"><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section class="llamada container">
<h1 class="llamada__titulo"> Aplicaciones en la medida</h1>
<p class="llamada__texto">Apeperia es una empresa emergente con una manera inovadora de comprar y crear aplicaciones móviles y web.</p>
<a class="llamada__boton boton" href="#">Conozca los planes</a>
</section>
<section class="destacados container">
<h2 class="destacados__titulo">Destacados</h2>
<a href="#">
<figure class="destacados__panel">
<img src="img/empezando-a-crear-logo.png" alt="Painel de la publicación sobre la creación del logotipo" class="destacados__panel-imagen">
<figuC class="destacados__panel-texto">Conozca las primeras etapas de la creación de un logotipo</figuC>
</figure>
</a>
<a href="#">
<figure class="destacados__panel">
<img src="img/sugestiones-fotografias.png" alt="Painel de la publicación sobre consejos de fotografía" class="destacados__panel-imagen">
<figuC class="destacados__panel-texto">¿Trabajas con fotografía? Conozca esos consejos</figuC>
</figure>
</a>
<a href="" class="destacados__boton boton">Recibir destacados por correo</a></section>
</main>
</body>
</html>
Head.css
.head {
color: var(--background-blanco);
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding-top: .75rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--border-cabecera-mobile);
position: absolute;
}
.head__logo {
margin-bottom: 1rem;
}
.head__navegacion {
text-align: center;
}
.head__enlace {
font-size: 1.1rem;
display: inline-block;
margin-right: .7rem;
margin-bottom: .7rem;
margin-left: .7rem;
}
Saludos!