Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

114
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda