Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

112
Vistas
Las imágenes en la aplicación web estática no se muestran después de la implementación de AWS Amplify

Tengo algunos problemas para que las imágenes funcionen después de implementar mi aplicación en AWS Amplify. Creé una aplicación bastante simple que consiste solo en archivos HTML, CSS y JS (sin angular/react/flutter, etc.). Mi estructura de carpetas es actualmente:

 - .html files - styles.css --- scripts |___app.js |___config.js |___aws.js --- images |___image1.PNG |___image2.PNG |___image3.PNG |___image4.PNG

En mi archivo app.js , tengo algunas configuraciones de creación de imágenes dinámicas de la misma manera (solo diferentes nombres de variables y archivos de imagen):

 var image = document.createElement('img'); image.src = '../images/image1.png'; image.addEventListener('click', myFunction); image.style.cursor = 'pointer';

Específicamente la línea image.src ; He probado diferentes combinaciones como:

  1. image.src = '../images/image1.png';
  2. image.src = './images/image1.png'; (una sugerencia que encontré decía eliminar uno de los puntos (no estoy seguro de por qué))
  3. image.src = '/images/image1.png'; (colocando la carpeta de imágenes dentro de la carpeta de scripts)
  4. image.src = 'image1.png'; (colocando las imágenes reales al mismo nivel que los guiones)
  5. Incluso intenté colocar las imágenes en un depósito S3 y, luego, usando el n.º 3, agregué una reescritura de imagen como se describe aquí: Documentación de reescritura/redireccionamiento de AWS .

No importa lo que intente, después de enviar mi código a GitHub y luego de que mi aplicación AWS Amplify termine de crear el código, cuando voy al sitio web, todas las imágenes se muestran como si no se pudieran encontrar y la consola de desarrollo siempre muestra algo a lo largo de las líneas de Image could not be found. The server returned with: 404 Could not be found error .

El código funciona perfectamente bien y las imágenes aparecen en mi máquina local cuando abro la vista previa en vivo usando Brackets.io o VS Code, pero no cuando se implementa en Amplify.

También intenté configurar en la consola de Amplify las reescrituras y redirecciones como se menciona en este foro de Github: Foro de Github, pero fue en vano. Mi sección actual de reescrituras y redireccionamientos de la consola de Amplify se parece efectivamente a lo que se muestra en el primer enlace.

Me debe faltar algún tipo de configuración para que esto funcione, pero no estoy seguro de qué es. Con suerte, es una solución simple y no necesito volver a hacer el proyecto de otra manera.

Gracias de antemano por cualquier ayuda.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Me lo imaginé. Decidí probar y usar Páginas de GitHub en su lugar para ver si ocurre el mismo problema allí y lo hace. Investigué un poco sobre por qué no aparecería allí y encontré este artículo: GitHub Pages Stackoverflow que básicamente dice que el nombre de archivo, la extensión y las carpetas distinguen entre mayúsculas y minúsculas. No pensé que AWS Amplify tendría este problema, pero lo tiene.

Mis archivos tenían .PNG como extensión de archivo, pero en el código usé .png . Después de cambiarlo en el código y volver a implementarlo, funcionó.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda