Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

NO SE MUESTRA UNA DE MIS IMAGENES

Buenas noches compañeros,

Con base en el ejercicio del primer curso de HTML Y CSS he desarrollado el codigo que se encuentra a continuación:

<html> 
    <head>
        <title> Dead By Daylight </title>
    </head>
    <body>
        <h1> Mi primer P100 </h1>
        <p> Felix Ritcher fue el primer superviviente que
            decidí levear hasta el prestigio No. 100 ya que,
            me siento muy identificado con su historia (lore), 
            así como me gustan sus habilidades y su aspecto físico</p>
        <img src="FELIX.jpg" alt="Marco Felix Ritcher">
        <h2> Historia </h2>
        <p> Felix Ritcher es un joven alemán que, tras la 
            desaparición de su hermana gemela, se obsesionó con 
            encontrarla. Su búsqueda lo llevó a descubrir un culto 
            oscuro que lo secuestró y lo llevó al Reino del 
            Terror, donde fue forzado a participar en los macabros 
            juegos del asesino conocido como "El Trapper". A pesar 
            de las adversidades, Felix logró escapar y ahora lucha 
            por sobrevivir en un mundo lleno de peligros y horrores.</p>
        <h3> Habilidades </h3>
        <ul>
            <li> Construcción duradera: Permite recargar tus items sí este 
                 se encuentra totalmente gastado, solo debes esconderte en 
                 una taquilla por 12 segundos. La primera vez se recarga al
                 99%, la segunda al 66% y la tercera al 33%.</li>  
            <img src="CONSTRUCCIÓN DURADERA.jpeg" alt="Imagen de la habilidad Construcción duradera">          
            <li> Visión del futuro: Siempre podrás ver el aura de los
                 motores que esten a 30 metros de distancia de ti. Esta
                 habilidad se deshabilita por 15 segundos cada vez que se
                 repara un motor. </li>
            <img src="VISIÓN DEL FUTURO.jpeg" alt="Imagen de la habilidad Visión del futuro">
            <li> Medidas desesperadas: Aumenta tu velocidad de curación y 
                 descuelgue en un 14% por cada superviviente que se encuentre
                 herido.</li>
            <img src="MEDIDAS DESESPERADAS.jpeg" alt="Imagen de la habilidad Medidas desesperadas">
        </ul>
    </body>
</html>

Mi problema es el siguiente: no se muestra la imagen de la habilidad "visión del futuro" y no encuentro razón para ello. Agradecería si alguién me pudiese dar una luz sobre este problema

1 respuesta

Hola Fabian, el problema con la imagen de “Visión del futuro” casi segura no viene del HTML, sino de cómo está guardado el archivo en tu carpeta.

1- Nombre del archivo y espacios

Tu ruta es: <img src="VISIÓN DEL FUTURO.jpeg" alt="Imagen de la habilidad Visión del futuro">

Los navegadores suelen tener problemas con:

Espacios en los nombres de archivo.
Acentos (ó, í) y caracteres especiales.

Entonces, aunque tu archivo se llame así en tu computadora, el navegador puede no interpretarlo bien.

2- Extensión del archivo

¿Tu archivo es realmente .jpeg? A veces en Windows aparece como imagen.jpeg pero en realidad es .jpg. Eso puede romper el vínculo.

3- Carpeta donde está la imagen

Si el HTML está en la carpeta raíz y las imágenes también, src="archivo.jpg" funciona. Si están en una subcarpeta, necesitarías src="imagenes/archivo.jpg".

**** Te comparto algunas buenas prácticas para nombres de archivos web:****

Siempre usar minúsculas.
Evitar espacios y tildes → usar _ o - en su lugar.
Mantener extensiones correctas (.jpg, .png, .gif, etc.).

Espero te sirva, saludos