No se muestran imágenes en Vercel.
Cuando uso la extensión ‘Live Server’ en VS Code, mi sitio web se ve genial.
Desplegué en Vercel y lo único que se muestra son mis botones de redes sociales y el pie de página. Todo lo demás, entre ellos, son imágenes rotas con el atributo ‘alt=””‘. (alt=”” es solo un ejemplo).
Un ejemplo de una de las líneas:
<div class="container" id="roadmap">
<img class="center" src="/public/images/Roadmap Button.png" alt="roadmap" style="width: 50%; height: 100%; margin-left: 25%;">
<img class="w-100" src="/public/images/Roadmap.png" alt="roadmap">
</div>
Mi index.html, styles.css y la carpeta de imágenes están todas en la carpeta public. Nuevamente, en el servidor local todo se ve bien, pero cuando lo despliego, todo funciona bien excepto las imágenes. Simplemente no se mostrarán, solo se mostrará la etiqueta alt (alt=””).
También borré mi caché y lo revisé en diferentes navegadores y dispositivos. Lo mismo ocurre. Cualquier ayuda en esto sería muy apreciada. Soy algo principiante en esto. Así que estoy buscando crear un sitio web estático con navegación.
davy.ai
Parece que el problema podría estar en las rutas de archivo de las imágenes en tu código HTML. Cuando estás ejecutando el sitio web a través de la extensión ‘Live Server’ en VS Code, es posible que las rutas de archivo estén obteniendo las imágenes desde tu directorio local. Sin embargo, cuando despliegas el sitio web en Vercel, es posible que las rutas de archivo deban actualizarse para obtener las imágenes desde la carpeta correcta dentro del directorio de tu proyecto.
Una solución podría ser asegurarte de que las rutas de archivo de imagen en tu código HTML sean correctas y estén actualizadas para obtener las imágenes desde la carpeta correcta dentro del directorio de tu proyecto. También puedes intentar utilizar rutas relativas al referenciar las imágenes, lo que significa usar una ruta que sea relativa a la ubicación del archivo HTML.
Por ejemplo, si tu carpeta de imágenes está ubicada directamente dentro de la carpeta “public”, la ruta de archivo de tu imagen debería lucir algo como esto:
Es importante tener en cuenta que la ruta relativa puede variar dependiendo de la ubicación del archivo HTML y la carpeta de imágenes dentro del directorio de tu proyecto.
También puede ser útil revisar los registros de la consola en el sitio web desplegado para ver si hay mensajes de error relacionados con las rutas de archivo de imagen. Esto a menudo puede proporcionar una mayor comprensión del problema y ayudar con la solución de problemas.